/* Peppe Circolo - Material Design 3 */
:root {
    --md-primary: #032b30;
    --md-on-primary: #ffffff;
    --md-primary-container: #eaddff;
    --md-on-primary-container: #21005d;
    --md-secondary: #625b71;
    --md-secondary-container: #e8def8;
    --md-tertiary: #7d5260;
    --md-error: #b3261e;
    --md-error-container: #f9dedc;
    --md-on-error: #ffffff;
    --md-surface: #fffbfe;
    --md-surface-variant: #e7e0ec;
    --md-on-surface: #1c1b1f;
    --md-on-surface-variant: #49454f;
    --md-outline: #79747e;
    --md-outline-variant: #cac4d0;
    --md-success: #1f7a1f;
    --md-success-container: #d8f0d8;
    --md-warning: #b3691e;
    --md-warning-container: #ffe0b3;
    --md-shadow: rgba(0,0,0,0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* Tema scuro: attivato manualmente da Impostazioni → Tema (html[data-theme="dark"]).
   I colori primario/secondario restano quelli del circolo (impostati inline da applyColors);
   qui si scuriscono solo superfici, testo, bordi e contenitori, per la massima leggibilità. */
html[data-theme="dark"] {
    --md-on-primary: #102a2e;
    --md-on-primary-container: #ffffff;
    --md-secondary-container: #3a3540;
    --md-surface: #1c1b1f;
    --md-surface-variant: #2b2930;
    --md-on-surface: #e6e1e5;
    --md-on-surface-variant: #c9c5cf;
    --md-outline: #938f99;
    --md-outline-variant: #45424b;
    --md-error: #f2b8b5;
    --md-error-container: #8c1d18;
    --md-on-error: #601410;
    --md-success: #7ddc7d;
    --md-success-container: #1f4620;
    --md-warning: #ffb870;
    --md-warning-container: #5a3a14;
    --md-shadow: rgba(0,0,0,0.5);
}
html[data-theme="dark"] body { background: #141317; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-size: 15px;
    line-height: 1.5;
    min-height: 100vh;
}

/* ===== LOGIN PAGE ===== */
.login-page {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; padding: 1rem;
    background: linear-gradient(135deg, var(--md-primary-container), var(--md-surface));
}
.login-card {
    background: var(--md-surface);
    border-radius: var(--radius-xl);
    padding: 2rem;
    max-width: 380px; width: 100%;
    box-shadow: 0 8px 32px var(--md-shadow);
    text-align: center;
}
.login-card .logo { font-size: 3rem; margin-bottom: 0.5rem; }
.login-card h1 { margin: 0 0 0.25rem; font-size: 1.5rem; color: var(--md-primary); }
.login-card .subtitle { color: var(--md-on-surface-variant); margin: 0 0 1.5rem; font-size: 0.9rem; }
.login-card .footer { color: var(--md-on-surface-variant); font-size: 0.8rem; margin: 1.5rem 0 0; }

/* ===== FORM FIELDS ===== */
.field { margin-bottom: 1rem; text-align: left; }
.field label {
    display: block;
    font-size: 0.85rem;
    color: var(--md-on-surface-variant);
    margin-bottom: 0.35rem;
    font-weight: 500;
}
.field input, .field select, .field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--md-outline);
    border-radius: var(--radius-sm);
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px var(--md-primary-container);
}
.field textarea { min-height: 70px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field-row.fr-3col { grid-template-columns: 1fr 1fr 1fr; }
.gal-color-row { display:grid; grid-template-columns: repeat(5, 1fr); gap:.75rem; align-items:end; margin-bottom:1rem; }
.gal-color-row .field { margin-bottom:0; min-width:0; }
.field-row.fr-4col { grid-template-columns: repeat(4, 1fr); }
.field-row.fr-5col { grid-template-columns: repeat(5, 1fr); }
.field-colpair { display:flex; gap:.5rem; }
.field-colpair > div { flex:1; min-width:0; }
.field-colpair input { height:2.6rem; width:100%; }

.field-row.fr-smtp-top { grid-template-columns: 2fr 1fr 1fr; }
.field-row.fr-smtp-cred { grid-template-columns: 1fr 1fr auto; align-items: end; }
.field-row.fr-smtp-cred .btn-secondary { margin-bottom: 1rem; }



/* ===== BUTTONS ===== */
.btn-primary, .btn-secondary, .btn-danger, .btn-text {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    min-height: 2.7rem; box-sizing: border-box;
    border-radius: 100px;
    font-size: 0.95rem; font-weight: 500;
    border: none; cursor: pointer;
    font-family: inherit;
    transition: background .2s, box-shadow .2s, transform .1s;
}
.btn-primary {
    background: var(--md-primary); color: var(--md-on-primary);
    width: 100%; margin-top: 0.5rem;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 2px 8px var(--md-shadow); }
.btn-primary:active:not(:disabled) { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
    background: var(--md-secondary-container); color: var(--md-on-surface);
}
.btn-danger {
    background: var(--md-error-container); color: var(--md-error);
}
.btn-text {
    background: transparent; color: var(--md-primary);
}
.btn-text:hover { background: var(--md-primary-container); }

.icon-btn {
    background: transparent; border: none;
    color: inherit; font-size: 1.4rem;
    padding: 0.5rem; cursor: pointer;
    border-radius: 50%; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: rgba(0,0,0,0.06); }
/* hover icon-btn (dark mode disabilitata) */

.logout-btn {
    width: auto !important;
    height: auto !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 100px !important;
    font-size: 1rem !important;
    background: rgba(255,255,255,0.15);
}
.logout-btn:hover { background: rgba(255,255,255,0.25); }

.error {
    background: var(--md-error-container); color: var(--md-error);
    padding: 0.75rem; border-radius: var(--radius-sm);
    margin-top: 0.75rem; font-size: 0.9rem;
}

/* ===== APP SHELL ===== */
.app-shell {
    display: grid;
    grid-template-areas: "topbar topbar" "sidebar content";
    grid-template-columns: 64px 1fr;
    grid-template-rows: 60px 1fr;
    height: 100vh;          /* fallback per browser molto vecchi */
    height: 100dvh;         /* dynamic viewport: si adatta alla barra del browser su mobile,
                               evitando la striscia tagliata quando la barra è visibile */
    height: var(--app-h, 100dvh); /* valore reale calcolato via JS (innerHeight), il più affidabile su mobile */
    min-height: 0;               /* annulla il min-height:100vh del body, che rendeva il documento scrollabile su mobile */
    position: fixed; top: 0; left: 0; right: 0; /* ancora la shell all'area visibile: niente scroll di pagina */
    overscroll-behavior: none;   /* niente rimbalzo/pull-to-refresh */
    overflow: hidden;        /* solo .content scrolla */
}
.topbar {
    grid-area: topbar;
    background: var(--md-primary);
    color: var(--md-on-primary);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem;
    box-shadow: 0 2px 6px var(--md-shadow);
    /* Sopra il contenuto: il popover delle notifiche vive qui dentro */
    position: sticky; top: 0; z-index: 1000;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.topbar-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}
.anno-filter {
    appearance: none;
    -webkit-appearance: none;
    background: var(--md-surface-variant);
    border: 1px solid var(--md-outline-variant);
    border-radius: 100px;
    padding: 0.4rem 2rem 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--md-on-surface);
    cursor: pointer;
    font-family: inherit;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
}
.anno-filter:hover { background-color: var(--md-outline-variant); }

/* === FILTRO SOCI === */
.soci-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.soci-search-wrap {
    position: relative;
    flex: 1;
    max-width: 360px;
    min-width: 180px;
}
.soci-search-wrap input {
    width: 100%;
    padding: 0.5rem 2.2rem 0.5rem 0.85rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 100px;
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-family: inherit;
    font-size: 0.9rem;
}
.soci-search-wrap input:focus {
    outline: none;
    border-color: var(--md-primary);
    background: var(--md-surface);
}
.soci-search-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--md-error);
    color: white;
    border: none;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}
.soci-search-clear:hover { opacity: 0.85; }
.chip-filter {
    border: 1px solid var(--md-outline-variant);
    border-radius: 100px;
    padding: 0.5rem 0.85rem;
    background: var(--md-surface);
    color: var(--md-on-surface);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.chip-filter:hover { background: var(--md-surface-variant); }
.chip-filter.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border-color: var(--md-primary);
}
/* Stato attivo "di allerta" (rosso): usato per filtri tipo "Da saldare" / "Non pagate" */
.chip-filter.active-red {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #dc2626;
}
.chip-filter.active-red:hover {
    background: #fecaca;
}
/* Stato attivo "oro": usato per il filtro "Soci Onorari" (omaggio) */
.chip-filter.active-gold {
    background: #fdf3d3;
    color: #8a6d00;
    border-color: #e0bf3f;
}
.chip-filter.active-gold:hover {
    background: #f9e9b0;
}
.topbar h1 { font-size: 1.1rem; margin: 0; font-weight: 500; }
.topbar .icon-btn { color: var(--md-on-primary); }
.topbar .icon-btn:hover { background: rgba(255,255,255,0.15); }
.user-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    background: rgba(255,255,255,0.15);
    border: none; border-radius: 100px;
    font-size: 0.85rem; color: inherit; font-family: inherit; cursor: pointer;
}
.user-chip:hover { background: rgba(255,255,255,0.25); }
.uc-caret { font-size: 0.7rem; opacity: 0.8; }
.uc-short { display: none; }
.user-menu-wrap { position: relative; }
.user-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--md-surface); color: var(--md-on-surface);
    border: 1px solid var(--md-outline-variant); border-radius: 12px;
    box-shadow: 0 8px 24px var(--md-shadow); padding: 0.3rem; min-width: 160px; z-index: 50;
}
.user-menu-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    background: none; border: none; padding: 0.6rem 0.8rem; border-radius: 8px;
    cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.user-menu-item:hover { background: var(--md-surface-variant); }
.role-badge {
    background: var(--md-on-primary); color: var(--md-primary);
    padding: 0.1rem 0.5rem; border-radius: 100px;
    font-size: 0.7rem; text-transform: uppercase; font-weight: 600;
}
.role-viewer { background: var(--md-secondary-container); color: var(--md-on-surface); }

.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--md-surface-variant);
    border-right: 1px solid var(--md-outline-variant);
    padding: 1rem 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    width: 64px;
    transition: width 0.2s ease;
    position: relative;
    z-index: 15;
}
/* Icona del toggle diversa per stato (auto / fisso aperto / fisso chiuso) */
#sidebarToggle .mt-ico { display: none; line-height: 1; }
/* Le regole delle frecce valgono SOLO per l'icona: prima colpivano anche le
   etichette, che usavano le stesse classi, e a barra chiusa comparivano scritte
   tagliate al posto della freccia. */
.app-shell.sidebar-locked #sidebarToggle .mt-ico.mt-closed,
.app-shell:not(.sidebar-pinned):not(.sidebar-locked) #sidebarToggle .mt-ico.mt-closed { display: inline; }
.app-shell.sidebar-pinned #sidebarToggle .mt-ico.mt-open { display: inline; }
/* Le etichette seguono lo stesso schema delle icone: "Nascondi" a menu aperto,
   "Espandi" a menu chiuso, invece di un generico "Mostra/Nascondi". */
/* A barra CHIUSA non si scrive nulla accanto all'icona: non ci sarebbe spazio
   e il testo coprirebbe la freccia. Ci pensa il suggerimento al passaggio del
   mouse ("Espandi"). A barra APERTA compare l'etichetta "Nascondi". */
/* "Nascondi" si vede solo a barra aperta; a barra chiusa nessuna scritta:
   c'è il suggerimento "Espandi" al passaggio del mouse. */
#sidebarToggle .nav-label.tg-aperto { display: none; }
.app-shell.sidebar-pinned #sidebarToggle .nav-label.tg-aperto { display: inline; }
/* A barra chiusa l'etichetta del pulsante non si mostra in linea: ci pensa
   il suggerimento accanto all'icona, gestito come per le altre voci. */
/* Toggle nella sidebar visibile solo su desktop */

/* Il toggle come primo item della sidebar (aspetto da nav-item) */
.nav-toggle { background: none; border: none; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.nav-toggle .nav-icon { font-size: 1.05rem; }
/* Separatori tra i gruppi di voci */
.nav-sep { height: 1px; background: var(--md-outline-variant); margin: 0.5rem 0.6rem; }
.app-shell.sidebar-locked .nav-sep { margin: 0.5rem 0.75rem; }
/* Impostazioni ancorata in fondo */
.nav-bottom { margin-top: auto; }
/* Tooltip col nome pagina quando la sidebar è chiusa (icone soltanto) */
.nav-tip { position: fixed; transform: translateY(-50%); background: var(--md-on-surface); color: var(--md-surface); padding: .35rem .6rem; border-radius: 8px; font-size: .85rem; white-space: nowrap; box-shadow: 0 4px 14px var(--md-shadow); z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .12s; }
.nav-tip.show { opacity: 1; }
/* Espansione TEMPORANEA su hover: solo in modalità "auto" (non pinned, non locked). */
.app-shell:not(.sidebar-pinned):not(.sidebar-locked) .sidebar:hover {
    width: 240px;
    box-shadow: 4px 0 16px var(--md-shadow);
}
/* Bloccata CHIUSA: resta collassata e NON si apre in hover */
.app-shell.sidebar-locked .sidebar { width: 64px; box-shadow: none; }
.app-shell.sidebar-locked .sidebar .nav-item { justify-content: center; padding: 0; }
.app-shell.sidebar-locked .sidebar .nav-label { display: none; }
.sidebar.open {
    width: 240px;
    box-shadow: 4px 0 16px var(--md-shadow);
}
/* PIN (desktop): la sidebar resta aperta e il FRAME si restringe adattandosi.
   La griglia passa da 64px a 240px, così .content occupa lo spazio rimasto. */
.app-shell.sidebar-pinned {
    grid-template-columns: 240px 1fr;
}
.app-shell.sidebar-pinned .sidebar {
    width: 240px;
    box-shadow: none;       /* niente overlay: è parte del layout */
    border-right: 1px solid var(--md-outline-variant);
}
/* Quando pinned, le etichette sono sempre visibili e l'hover non cambia nulla */
.app-shell.sidebar-pinned .sidebar .nav-item { justify-content: flex-start; padding: 0 0.9rem; }
.app-shell.sidebar-pinned .sidebar .nav-label { display: inline; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.9rem;
    height: 44px;                    /* altezza fissa: niente salti tra collassata/espansa */
    color: var(--md-on-surface);
    text-decoration: none;
    border-radius: 100px;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    transition: background .15s;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.nav-icon {
    font-size: 1.3rem;
    line-height: 1;                  /* niente extra baseline */
    height: 1.3rem;                  /* contiene l'emoji */
    width: 28px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-label {
    line-height: 1;                  /* stessa altezza dell'icona, no salti */
    transition: opacity 0.15s;
}
/* Collassata: nascondo il testo, lascio l'icona centrata (ma NON quando pinned) */
.app-shell:not(.sidebar-pinned) .sidebar:not(:hover):not(.open) .nav-item {
    justify-content: center;
    padding: 0;
}
.app-shell:not(.sidebar-pinned) .sidebar:not(:hover):not(.open) .nav-label {
    display: none;
}
.nav-item:hover { background: var(--md-secondary-container); }
.nav-item.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    font-weight: 500;
}

.content {
    grid-area: content;
    padding: 1.5rem;
    overflow-y: auto;
}
/* In Contabilità il contenuto resta in una schermata (solo desktop) */
.loading { text-align: center; padding: 3rem; color: var(--md-on-surface-variant); }

/* Bottombar mobile - nascosta su desktop */
.bottombar { display: none; }



/* === Logo + Nome circolo affiancati nelle impostazioni === */
.logo-name-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.logo-cell {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
    width: 140px;
}
.logo-preview {
    width: 140px;
    height: 140px;
    border: 1px dashed var(--md-outline-variant);
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
/* Pulsanti del logo: impilati e larghi quanto l'anteprima, così la colonna
   di sinistra ha la stessa altezza dei tre campi a destra. */
.logo-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.logo-actions .logo-btn { width: 100%; padding: 0.42rem 0.5rem; font-size: .9rem; justify-content: center; }
.logo-name-row { align-items: stretch; flex-wrap: wrap; }
.logo-cell { justify-content: space-between; }
/* Con due colonne (logo + icona) su schermi stretti si va a capo invece di
   schiacciare i dati dell'associazione. */
@media (max-width: 620px) {
    .logo-cell { width: calc(50% - .5rem); }
    .logo-name-row > div:last-child { flex: 1 1 100%; }
}
.logo-preview { flex: 1 1 auto; height: auto; min-height: 92px; }
.logo-preview img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.logo-placeholder {
    color: var(--md-on-surface-variant);
    font-size: 0.7rem;
    text-align: center;
    padding: 0 0.3rem;
}
.logo-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    padding: 0.4rem 0.3rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.1;
    transition: background 0.15s;
}
.logo-btn:hover {
    background: var(--md-outline-variant);
}
.logo-btn-remove {
    color: var(--md-error);
    background: transparent;
    border-color: var(--md-error-container);
}
.logo-btn-remove:hover {
    background: var(--md-error-container);
}

/* === ATTIVITÀ: partecipanti saldati === */
.part-saldato {
    background: rgba(34, 197, 94, 0.05);
}
.check-saldo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 28px;
    height: 28px;
}
.check-saldo input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--md-outline-variant);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
    margin: 0;
}
.check-saldo input[type="checkbox"]:checked {
    background: var(--md-success, #16a34a);
    border-color: var(--md-success, #16a34a);
}
.check-saldo input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.check-saldo-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    background: var(--md-surface-variant);
    border-radius: 8px;
}
.check-saldo-inline input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--md-outline-variant);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin: 0;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.check-saldo-inline input[type="checkbox"]:checked {
    background: var(--md-success, #16a34a);
    border-color: var(--md-success, #16a34a);
}
.check-saldo-inline input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Tag origine voci in pagina Entrate */
.origin-tag {
    color: var(--md-on-surface-variant);
    font-size: 0.7rem;
    background: var(--md-surface-variant);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
    white-space: nowrap;
}

.kpi-sub {
    font-size: 0.78rem;
    color: var(--md-on-surface-variant);
    margin-top: 0.25rem;
}

/* === DASHBOARD: riga KPI compatta === */
.btn-print-round { width:40px; height:40px; flex:0 0 auto; border-radius:50%; border:1px solid var(--md-outline-variant); background:var(--md-surface); color:var(--md-on-surface); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.btn-print-round:hover { background:var(--md-surface-variant); }
.btn-print-round svg { width:20px; height:20px; }
.btn-copy-round { width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--md-outline-variant); background:var(--md-surface); color:var(--md-on-surface); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.btn-copy-round:hover { background:var(--md-surface-variant); }
.btn-copy-round svg { width:18px; height:18px; }
.kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.kpi-mini {
    background: var(--md-surface);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 1px 4px var(--md-shadow);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.kpi-mini-val { margin-top: auto; }
.kpi-mini-sub { margin-bottom: auto; }
.kpi-mini-lbl {
    font-size: 0.72rem;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-mini-val {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--md-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-mini-val small {
    font-size: 0.75rem;
    color: var(--md-on-surface-variant);
    font-weight: 500;
    margin-left: 1px;
}
.kpi-mini-val.positive { color: var(--md-success, #16a34a); }
.kpi-mini-val.negative { color: var(--md-error); }
.kpi-mini-val.warning { color: #b45309; }
.kpi-mini-sub {
    font-size: 0.7rem;
    color: var(--md-on-surface-variant);
    margin-top: 0.25rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KPI a due colonne (numerone + dettaglio a destra) — stessa larghezza delle altre */
.kpi-split {
    background: var(--md-surface);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 1px 4px var(--md-shadow);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.kpi-split-lbl {
    font-size: 0.72rem;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-split-body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
}
.kpi-split-main {
    flex: 0 0 auto;
    text-align: center;
    padding-right: 0.6rem;
    border-right: 1px solid var(--md-outline-variant, #e3e3e3);
}
.kpi-split-num {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--md-on-surface);
    font-variant-numeric: tabular-nums;
}
.kpi-split-num.is-euro { font-size: 1.15rem; }
.kpi-split-num.positive { color: var(--md-success, #2e7d32); }
.kpi-split-num.negative { color: var(--md-error, #b3261e); }
.kpi-split-cap {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--md-on-surface-variant);
    margin-top: 0.25rem;
}
.kpi-split-list {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.45rem;
    row-gap: 0.3rem;
    align-items: baseline;
}
.kpi-split-item { display: contents; }
.kpi-split-n {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--md-on-surface);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.kpi-split-n-eur { min-width: 0; font-size: 0.8rem; }
.kpi-split-t {
    font-size: 0.72rem;
    color: var(--md-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.kpi-split-empty {
    font-size: 0.75rem;
    color: var(--md-on-surface-variant);
    font-style: italic;
    grid-column: 1 / -1;
}

/* Mobile: 2 colonne; le card split occupano l'intera riga */


/* === DASHBOARD: calendario === */
.cal-bento {
    padding: 1.25rem;
}
.cal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.cal-header-left, .cal-header-right {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-shrink: 0;
}
.cal-header-center {
    flex: 1;
    text-align: center;
    min-width: 0;
}
.cal-mese {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    /* Tutto il blocco data (numero + mese + anno) ha lo sfondo scuro del tema */
    background: var(--md-primary);
    color: var(--md-on-primary);
    border-radius: 12px;
    padding: 0.3rem 0.8rem;
}
.cal-mese-giorno {
    /* Il numero non ha più sfondo proprio: è già dentro il blocco scuro */
    display: inline-block;
    font-weight: 800;
    margin-right: 0.15rem;
}
.cal-sotto-wrap {
    margin-top: 0.35rem;
}
.cal-sotto {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 100px;
    /* primario del tema molto schiarito (più chiaro del badge data) */
    background: color-mix(in srgb, var(--md-primary) 22%, white 78%);
    color: var(--md-primary);
}
.cal-nav {
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.cal-nav:hover { background: var(--md-outline-variant); }

.cal-oggi-btn {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: 100px;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.cal-oggi-btn:hover { background: var(--md-outline-variant); }

.cal-giorni-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 0;
}
.cal-giorno-nome {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.3rem 0;
}

.cal-grid {
    display: flex;
    flex-direction: column;
    /* Linea in basso che chiude la griglia */
    border-bottom: 1px solid var(--md-outline-variant);
}
.cal-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
/* === DASHBOARD: layout a tutta altezza === */
.dashboard-page {
    /* Riempie l'altezza disponibile del content. Il content ha overflow-y:auto;
       qui evitiamo lo scroll interno e facciamo prendere al calendario lo spazio residuo. */
    min-height: calc(100vh - 60px - 3rem);  /* fallback */
    min-height: calc(100dvh - 60px - 3rem);  /* viewport dinamico - topbar(60) - padding content(1.5rem * 2) */
    display: flex;
    flex-direction: column;
}
.dashboard-page > .section-title { flex-shrink: 0; }
.dashboard-page > .kpi-row { flex-shrink: 0; }
.dashboard-page > .cal-bento {
    flex: 1;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    min-height: 0; /* permette al figlio cal-grid di restringersi correttamente in flex */
}
.dashboard-page > .cal-bento > .cal-header { flex-shrink: 0; }
.dashboard-page > .cal-bento > .cal-giorni-header { flex-shrink: 0; }
.dashboard-page > .cal-bento > .cal-grid {
    flex: 1;
    min-height: 0;
}
.dashboard-page > .cal-bento > .cal-grid > .cal-row {
    flex: 1;
    min-height: 0;
}

/* Cellule senza min-height fissa: si distribuiscono in proporzione */
.cal-cell {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow: hidden;
    min-height: 0;
    /* Linee semplici tra le celle: bordo destro + bordo sopra */
    border-right: 1px solid var(--md-outline-variant);
    border-top: 1px solid var(--md-outline-variant);
}
/* Ultima cella di ogni riga: niente bordo destro */
.cal-row .cal-cell:last-child { border-right: none; }
/* Tolto: niente sbiadimento per giorni di altro mese.
   La distinzione visiva è data dall'abbreviazione mese nel cerchio numero. */
.cal-cell-oggi {
    background: rgba(103, 80, 164, 0.04);
}
/* Container del badge data nella cella calendario:
   contiene un cerchio col numero del giorno e (opzionale) sotto/accanto l'abbreviazione
   del mese (e anno se diverso da quello corrente). Il cerchio resta sempre 30x30,
   l'etichetta sotto può sbordare lateralmente senza essere tagliata. */
.cal-num {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    flex-shrink: 0;
    line-height: 1;
}
.cal-num[data-new-prom] { cursor: pointer; }
.cal-num[data-new-prom]:hover .cal-num-d {
    background: var(--md-primary-container);
    transform: scale(1.06);
}
.cal-num-d {
    /* Quadrato con angoli arrotondati col numero del giorno */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.15s, transform 0.1s;
}
.cal-num-m {
    /* Etichetta mese accanto al numero: solo testo, niente sfondo */
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 0;
    padding-left: 0;
    color: var(--md-on-surface-variant);
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: left;
}
/* Giorno di OGGI: evidenzio l'intero blocco data (numero + mese)
   col colore primario del tema, non solo il cerchio del numero. */
.cal-num-oggi .cal-num-d {
    background: var(--md-primary);
    color: var(--md-on-primary);
}
.cal-num-oggi .cal-num-m {
    color: var(--md-primary);
    font-weight: 700;
}
.cal-evt-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    flex: 1;
}
.cal-evt {
    font-size: 0.72rem;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    transition: background 0.15s;
}
.cal-evt:hover { background: var(--md-outline-variant); }
.cal-evt-manuale {
    background: #fef3c7;
    border-left: 2px solid #f59e0b;
}
.cal-evt-auto {
    background: #dbeafe;
    border-left: 2px solid #3b82f6;
}
.cal-evt-completato {
    background: #dcfce7;
    border-left: 2px solid #16a34a;
}
.cal-evt-piu {
    background: var(--md-surface-variant);
    color: var(--md-on-surface-variant);
    font-style: italic;
    text-align: center;
}
.cal-evt-modal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    background: var(--md-surface-variant);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.cal-evt-modal:hover { background: var(--md-outline-variant); }

/* === MODALE EVENTO === */
.evento-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: -0.5rem 0 1rem;
}
.evento-info {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
}
.evento-info-lbl {
    color: var(--md-on-surface-variant);
    font-size: 0.85rem;
}
.evento-info-data {
    font-size: 1rem;
    color: var(--md-on-surface);
}
.evento-importo {
    font-size: 0.95rem;
    color: var(--md-on-surface);
}
.evento-desc-box {
    padding: 0.75rem;
    background: var(--md-surface-variant);
    border-radius: 10px;
}
.evento-desc-lbl {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.35rem;
}
.evento-desc-text {
    color: var(--md-on-surface);
    white-space: pre-wrap;
    line-height: 1.45;
}
.evento-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--md-outline-variant);
    margin-top: 0.5rem;
}
.evento-actions .btn-danger,
.evento-actions .btn-primary,
.evento-actions .btn-secondary {
    margin-top: 0;
}

/* Mobile: celle più strette */



/* ===== CARDS / KPI ===== */
.section-title {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 1rem;
    gap: 0.75rem;
    flex-wrap: nowrap;
    min-height: 44px;
}
.section-title h2 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
}
/* Bottoni dentro section-title non hanno margin-top (override del default su .btn-primary) */
.section-title .btn-primary,
.section-title > div .btn-primary {
    margin-top: 0;
}

/* I bottoni nella section-title usano padding naturale, niente override altezza fissa.
   Tutti i bottoni .btn-* hanno padding identico (0.65rem 1.25rem) → altezza coerente. */

/* Riga titolo bento con bottone + NUOVO a sinistra */
.title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.title-row h3 { margin: 0; flex: 1; }
.title-row .actions-right {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Gruppo di azioni/filtri allineato a destra, riusabile fuori da .title-row */
.actions-right {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Bottone "+ NUOVO" compatto (icon + label sotto) */
/* Pulsante "+" unificato: cerchio in rilievo, solo simbolo, colore tema leggermente
   più scuro. Stesso stile e dimensione ovunque, sempre a sinistra del titolo. */
.btn-add {
    background: var(--md-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
    transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.btn-add:hover { filter: brightness(1.08); box-shadow: 0 3px 8px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.14); }
.btn-add:active { transform: scale(0.93); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
/* Il "+" è disegnato con due barre (non un glifo tipografico, che ha offset variabili
   tra font): così è centrato geometricamente al pixel. Le barre stanno in ::before e ::after. */
.btn-add { position: relative; }
.btn-add::before, .btn-add::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.28);
}
.btn-add::before { /* barra orizzontale */
    width: 14px; height: 2.5px;
    transform: translate(-50%, -50%);
}
.btn-add::after { /* barra verticale */
    width: 2.5px; height: 14px;
    transform: translate(-50%, -50%);
}
/* Le vecchie etichette/segni interni non servono più */
.btn-add-plus, .btn-add-label { display: none; }

/* Bottone "Indietro" maratona - identico allo stile .btn-secondary ma con sfondo neutro */
.btn-back {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 0.65rem 1.25rem;
    border-radius: 100px;
    font-size: 0.95rem; font-weight: 500;
    border: none; cursor: pointer;
    font-family: inherit;
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    flex-shrink: 0;
    line-height: 1;
    transition: background .2s, box-shadow .2s, transform .1s;
}
.btn-back:hover {
    background: var(--md-outline-variant);
}
.btn-back:active {
    transform: scale(0.98);
}

/* Niente altezza fissa: i bottoni .btn-* hanno tutti padding 0.65rem 1.25rem → altezza uniforme naturalmente */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi-card {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    position: relative;
}
.kpi-card .label {
    font-size: 0.8rem;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.kpi-card .value {
    font-size: 1.8rem; font-weight: 600;
    margin: 0.25rem 0 0;
    color: var(--md-primary);
}
.kpi-card .value.positive { color: var(--md-success); }
.kpi-card .value.negative { color: var(--md-error); }
.kpi-card .value.warning { color: var(--md-warning); }
.kpi-card .sub { font-size: 0.8rem; color: var(--md-on-surface-variant); margin-top: 0.25rem; }
/* I box metrici dentro una kpi-grid hanno uno sfondo grigio chiaro (come i KPI Panoramica newsletter) */
.kpi-grid .kpi-card {
    background: var(--md-surface-variant);
    border-color: transparent;
}

/* ===== ALERT BANNER ===== */
.alert-banner {
    background: var(--md-warning-container);
    border-left: 4px solid var(--md-warning);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}
.alert-banner h3 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--md-warning); }
.alert-banner ul { margin: 0; padding-left: 1.25rem; }
.alert-banner li { margin-bottom: 0.3rem; font-size: 0.9rem; }

/* ===== TABLES ===== */
.table-wrap {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    /* Scroll verticale interno con header sticky */
    overflow-y: auto;
    overflow-x: auto;
    max-height: calc(100vh - 260px); /* viewport - topbar - section-title - title-row - padding */
    margin-bottom: 1rem;
}
table {
    width: 100%; border-collapse: collapse;
}
thead {
    background: var(--md-surface-variant);
    position: sticky;
    top: 0;
    z-index: 5;
}
thead th {
    /* Bordo sotto come separatore visivo durante scroll */
    box-shadow: 0 1px 0 var(--md-outline-variant);
}
th, td {
    padding: 0.75rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--md-outline-variant);
    font-size: 0.9rem;
}
/* Colonne che contengono nominativi o descrizioni vanno allineate a sinistra.
   Marcare con class="col-text" su th e td. */
th.col-text, td.col-text {
    text-align: left;
}
th {
    font-weight: 600;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.78rem;
}
tbody tr:hover { background: var(--md-surface-variant); }
tbody tr:last-child td { border-bottom: none; }

/* Quando la tabella è dentro una bento-2-1 (due affiancate) max-height più ridotto */
.bento-2-1 .table-wrap {
    max-height: calc(100vh - 280px);
}



/* ===== STATUS CHIPS ===== */
.chip {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
}
.chip-success { background: var(--md-success-container); color: var(--md-success); }
.chip-warning { background: var(--md-warning-container); color: var(--md-warning); }
.chip-error { background: var(--md-error-container); color: var(--md-error); }
.chip-neutral { background: var(--md-surface-variant); color: var(--md-on-surface-variant); }
.chip-overdue { background: var(--md-error-container); color: var(--md-error); font-weight: 600; }

/* ===== FAB ===== */
.fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--md-shadow);
    z-index: 5;
    transition: transform .15s, box-shadow .15s;
}
.fab:hover { box-shadow: 0 6px 18px var(--md-shadow); transform: translateY(-2px); }


/* ===== MODAL ===== */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 30; padding: 1rem;
    animation: fadeIn .15s;
}
.modal-overlay[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal-card {
    background: var(--md-surface);
    border-radius: var(--radius-xl);
    max-width: 560px; width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px var(--md-shadow);
    animation: slideUp .2s;
}
.modal-card.wide { max-width: 920px; max-height: 80vh; }
/* Modale documenti: header fisso, anteprima che scorre DENTRO la modale */
.modal-card.doc-modal {
    display: flex; flex-direction: column; overflow: hidden;
    /* Il modale non deve mai superare la finestra: tengo conto anche della
       spaziatura del contenitore (1rem per lato) e delle aree di sistema. */
    max-height: calc(100dvh - 2rem);
    height: calc(100dvh - 2rem);
}
@supports not (height: 100dvh) {
    .modal-card.doc-modal { max-height: calc(100vh - 2rem); height: calc(100vh - 2rem); }
}
.modal-card.doc-modal > div { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.doc-modal .doc-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.doc-modal .doc-preview-pdf { flex: 1; min-height: 0; max-height: none; }
.doc-modal .doc-preview-imgwrap { flex: 1; min-height: 0; overflow: auto; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.modal-card header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem 0.5rem;
}
.modal-card header h2 { margin: 0; font-size: 1.2rem; }
.modal-card > div { padding: 1rem 1.5rem 1.5rem; }
.modal-card form .actions {
    display: flex; gap: 0.75rem; justify-content: flex-end; align-items: center; flex-wrap: wrap;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--md-outline-variant);
}
/* Quando un pulsante primario sta in fila con altri, non deve occupare tutta
   la larghezza né sfalsarsi verticalmente: allineamento uniforme delle azioni. */
.modal-card form .actions .btn-primary,
.modal-card .actions .btn-primary,
.modal-actions .btn-primary,
.doc-modal-actions .btn-primary { width: auto; margin-top: 0; }
.modal-actions, .doc-modal-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* ===== TOASTS ===== */
.toasts {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    z-index: 11000;
    display: flex; flex-direction: column; gap: 0.5rem;
    pointer-events: none;
}
.toast {
    background: var(--md-on-surface); color: var(--md-surface);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px var(--md-shadow);
    font-size: 0.9rem;
    animation: toastIn .25s;
    pointer-events: auto;
    max-width: 90vw;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
.toast.success { background: var(--md-success); color: white; }
.toast.error { background: var(--md-error); color: white; }

/* ===== ACTIONS column ===== */
.row-actions { display: inline-flex; gap: 0.3rem; }
.row-actions button {
    background: transparent;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--md-on-surface);
    transition: background .15s;
}
.row-actions button:hover { background: var(--md-secondary-container); }
.row-actions button.danger { color: var(--md-error); border-color: var(--md-error-container); }
.row-actions button.danger:hover { background: var(--md-error-container); }
.row-actions button.success { color: var(--md-success); border-color: var(--md-success-container); }
.row-actions button.success:hover { background: var(--md-success-container); }

/* ===== MARATHON DISPLAY ===== */
.marathon-active {
    background: linear-gradient(135deg, var(--md-primary), var(--md-tertiary));
    color: white;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    text-align: center;
    margin-bottom: 1rem;
}
.marathon-active .countdown {
    font-size: 3rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 0.5rem 0;
}
.marathon-active .name { font-size: 1.2rem; opacity: 0.9; }
.marathon-active .actions { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: center; }

/* ===== COCKPIT MARATONA (admin in corso) ===== */
.cockpit-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--md-primary) 78%, #fff), color-mix(in srgb, var(--cockpit-accent, var(--md-tertiary)) 70%, #fff));
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-xl);
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    flex-shrink: 0;
}
/* Grana fotografica sovrapposta al gradient.
   Uso un SVG inline con feTurbulence (rumore frattale) come noise generato dal browser.
   Niente file extra, niente download, leggero e scalabile. */
.cockpit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    opacity: 0.22;
    mix-blend-mode: overlay;
    z-index: 0;
}
/* I figli devono stare sopra alla grana */
.cockpit-card > *, .cockpit-main, .cockpit-footer {
    position: relative;
    z-index: 1;
}
.cockpit-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.cockpit-title-name {
    font-family: 'Trebuchet MS', 'Verdana', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    word-break: break-word;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cockpit-title-status {
    font-size: 0.82rem;
    opacity: 0.85;
    font-weight: 500;
}
.cockpit-cd-num {
    font-size: 1.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 0.15rem;
}
.cockpit-cd-soft {
    opacity: 0.6;
    font-size: 1.6rem;
}
.cockpit-cd-lbl {
    font-size: 0.75rem;
    opacity: 0.85;
    text-align: center;
}
/* Mobile: stack verticale */


/* ===== BENTO LAYOUT 2:1 (Maratone) ===== */
.bento-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bento-card {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.bento-card h3 { margin: 0 0 0.75rem; font-size: 1.1rem; color: var(--md-primary); }
.bento-card h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }

/* === Dettaglio Maratona: layout flex senza scroll esterno === */
.maratona-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.75rem;
}
.maratona-page .section-title { flex: 0 0 auto; }
.maratona-page .cockpit-card { flex: 0 0 auto; margin-bottom: 0; }

/* === Dettaglio Attività: layout 2:1 con calendario incontri === */
.att-layout-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) {
    .att-layout-2-1 { grid-template-columns: 1fr; }
}
.att-col-main { min-width: 0; }
.att-col-side { min-width: 0; }

.incontri-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.incontro-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: var(--md-surface);
}
.incontro-row1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.incontro-row2 {
    display: flex;
    gap: 0.4rem;
    padding-left: 36px;
}
.incontro-titolo, .incontro-url {
    flex: 1;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    background: var(--md-surface);
    font-family: inherit;
    font-size: 0.82rem;
}
.incontro-titolo { flex: 1.2; }
.incontro-item.is-done {
    background: var(--md-surface-variant);
    opacity: 0.7;
}
.incontro-num {
    font-weight: 600;
    color: var(--md-primary);
    min-width: 28px;
}
.incontro-data {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    background: var(--md-surface);
    font-family: inherit;
    font-size: 0.85rem;
}
.incontro-data:disabled { background: transparent; border-color: transparent; }
.incontro-done {
    font-size: 0.75rem;
    color: var(--md-success, #16a34a);
    font-weight: 600;
}
.incontro-actions {
    display: flex;
    gap: 0.25rem;
}

/* Calendario incontri: riga singola (data + titolo + link + azioni) nella bento larga */
.incontro-1riga {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
.incontro-1riga .incontro-data { flex: 0 0 140px; }
.incontro-1riga .incontro-titolo { flex: 2; min-width: 120px; }
.incontro-1riga .incontro-url { flex: 1.5; min-width: 110px; }
.incontro-titolo-ro { flex: 2; min-width: 120px; font-size: 0.85rem; }
.incontro-url-ro { flex: 0 0 auto; font-size: 0.8rem; color: var(--md-primary); text-decoration: none; }
.incontro-add {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

/* Icona stato pagamento (a rate): ⬜ da saldare · 🔲 parziale · ✅ saldato */
.saldo-icon {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}
.saldo-icon:hover { background: var(--md-surface-variant); }
.saldo-mini {
    font-size: 0.68rem;
    color: var(--md-on-surface-variant);
    margin-top: 1px;
    white-space: nowrap;
}
/* === Pagina Soci: layout flex per riempire esattamente il viewport === */
.soci-page {
    display: flex;
    flex-direction: column;
    height: 100%;          /* riempie .content che è 100vh - topbar */
    min-height: 0;
    gap: 1rem;
}
.soci-page .section-title { flex: 0 0 auto; margin: 0; }
.soci-bento-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    display: grid;
}
.soci-bento {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.soci-bento .table-wrap.soci-table-wrap {
    flex: 1 1 auto;
    max-height: none;       /* l'altezza è data dal flex container */
    min-height: 0;
    margin-bottom: 0;
}

/* === LAYOUT DETTAGLIO MARATONA ===
   Colonna 1 = Temi (1fr), Colonna 2+3 = Partecipanti + Chat (2fr suddiviso 1:1).
   Altezze fisse: lo scroll è interno alle aree contenuto, mai sulla pagina.
   Calcolo: 100vh - topbar 60 - section-title ~60 - cockpit ~95 - padding 48 = ~277. Uso flex per essere robusti. */
.maratona-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin-bottom: 0;
    min-height: 0;
    flex: 1 1 auto;
}
.maratona-bento-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
}
/* Bento card maratona: ereditano altezza dal flex parent. Senza max-height fissi
   evito che lo somma cockpit + section title spinga il content oltre il viewport. */
.maratona-bento-temi,
.maratona-bento-part,
.maratona-bento-chat {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.maratona-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* spazio per non incollarsi al bordo dello scrollbar */
    padding-right: .25rem;
}
.maratona-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--md-surface-variant);
    border-radius: 12px;
    padding: .6rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-height: 0;
}
@media (max-width: 900px) {
    .maratona-layout { grid-template-columns: 1fr; }
    .maratona-bento-right { grid-template-columns: 1fr; }
    .maratona-bento-temi,
    .maratona-bento-part,
    .maratona-bento-chat {
        max-height: 60vh;
    }
}
.empty-small {
    text-align: center;
    padding: 1.5rem;
    color: var(--md-on-surface-variant);
    font-size: 0.9rem;
}

/* ===== TEMA CARD ===== */
.temi-list { display: flex; flex-direction: column; gap: 0.5rem; }
.tema-card {
    background: var(--md-surface-variant);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    transition: transform 0.15s;
}
.tema-card:hover { transform: translateY(-1px); }

/* === LAYOUT COMPATTO 2 COLONNE === */
.tema-card-compact {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: flex-start;
}
.tema-info { min-width: 0; }
.tema-head-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.tema-head-row .tema-ordine {
    flex-shrink: 0;
    margin: 0;
}
.tema-head-row .tema-titolo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--md-on-surface);
    margin: 0;
    word-break: break-word;
}
.tema-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}
.tema-controls .tema-stato { text-align: right; }
.tema-controls .tema-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0;
    flex-wrap: nowrap;
}
.tema-controls .btn-icon {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1;
}

.tema-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.5rem;
}
.tema-ordine {
    font-size: 0.72rem;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.tema-titolo {
    font-size: 1.05rem; font-weight: 600;
    color: var(--md-on-surface);
    margin: 0.15rem 0 0.25rem;
}
.tema-meta {
    font-size: 0.78rem;
    color: var(--md-on-surface-variant);
    margin-top: 0.2rem;
}
.tema-meta code {
    background: var(--md-surface);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-family: 'SF Mono', Consolas, monospace;
    font-weight: 600;
    color: var(--md-primary);
}
.tema-actions {
    display: flex; gap: 0.4rem; margin-top: 0.6rem;
    flex-wrap: wrap;
}

/* Mobile: stack verticale per card temi compatte */

.btn-icon {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--md-on-surface);
    font-family: inherit;
    transition: background 0.15s;
}
.btn-icon:hover { background: var(--md-primary-container); }
.btn-icon.danger { color: var(--md-error); border-color: var(--md-error-container); }
.btn-icon.success { color: var(--md-success); border-color: var(--md-success); }

.btn-icon-inline {
    background: transparent;
    border: none;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.15rem 0.3rem;
    margin-right: 0.3rem;
    border-radius: 4px;
    transition: all 0.15s;
    vertical-align: middle;
}
.btn-icon-inline:hover {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}
.btn-icon.danger:hover { background: var(--md-error-container); }

/* ===== PARTECIPANTI LIST ===== */
.part-list {
    display: flex; flex-direction: column; gap: 0.4rem;
    max-height: 60vh;
    overflow-y: auto;
}
.part-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--md-surface-variant);
    border-radius: var(--radius-md);
    gap: 0.5rem;
}
.part-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.part-info { flex: 1; min-width: 0; }
.part-nome {
    font-weight: 600;
    color: var(--md-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.part-meta {
    font-size: 0.8rem;
    color: var(--md-on-surface-variant);
    margin-top: 0.15rem;
}
.part-pending-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.part-row-pending {
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
}
.part-row-rejected {
    background: var(--md-error-container);
    border-left: 3px solid var(--md-error);
    opacity: 0.85;
}
.part-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--md-on-surface-variant);
    margin: 0.6rem 0 0.2rem;
    padding-top: 0.3rem;
}
.part-section-title:first-child { margin-top: 0; padding-top: 0; }
.part-section-pending { color: #b45309; }
.part-section-rejected { color: var(--md-error); }

/* hide admin-only items for viewers */
body[data-role="viewer"] .admin-only { display: none !important; }
body[data-role="viewer"] .fab { display: none !important; }

.empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--md-on-surface-variant);
}
.empty .icon { font-size: 3rem; opacity: 0.5; }
.empty h3 { margin: 1rem 0 0.25rem; }


/* Box notifica manuale sopra la chat nella bento chat maratona */
.maratona-push-box {
    background: var(--md-surface-variant);
    border-radius: 10px;
    padding: 0.6rem;
    flex-shrink: 0;
}
.maratona-push-inp {
    width: 100%;
    padding: .4rem .6rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    margin-bottom: .3rem;
    font-size: .85rem;
    font-family: inherit;
}
.maratona-push-area {
    width: 100%;
    padding: .4rem .6rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    min-height: 40px;
    font-family: inherit;
    font-size: .85rem;
    resize: vertical;
}

/* === Pagina Uscite: layout flex full-height === */
.uscite-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.75rem;
}
.uscite-page .section-title { flex: 0 0 auto; margin: 0; }
.uscite-kpi { flex: 0 0 auto; margin: 0; }
.uscite-bento-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    display: grid;
}
.uscite-bento {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 1rem;
}
.uscite-bento .uscite-table-wrap {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    margin-bottom: 0;
}
/* Tabelle compatte (uscite e simili): righe più basse */
table.table-compact th,
table.table-compact td {
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}
table.table-compact th { font-size: 0.72rem; }

/* Toggle "Attiva" nell'header della modale (es. modifica spesa ricorrente) */
.modal-toggle-attiva {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    margin-right: 0.5rem;
    font-size: 0.85rem;
    color: var(--md-on-surface);
}
.modal-toggle-attiva input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.modal-toggle-track {
    width: 34px;
    height: 18px;
    background: var(--md-outline-variant);
    border-radius: 100px;
    position: relative;
    transition: background .15s;
    flex-shrink: 0;
}
.modal-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    transition: transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.modal-toggle-attiva input[type="checkbox"]:checked + .modal-toggle-track {
    background: var(--md-primary);
}
.modal-toggle-attiva input[type="checkbox"]:checked + .modal-toggle-track .modal-toggle-thumb {
    transform: translateX(16px);
}
.modal-toggle-lbl {
    font-weight: 500;
}

/* Toggle generico (stile uniforme in tutto il gestionale): testo a sinistra, interruttore a destra.
   Stessi colori del tema del gestionale. Markup:
   <label class="ui-switch"><span class="ui-switch-lbl">Testo</span>
     <input type="checkbox"><span class="ui-switch-track"><span class="ui-switch-thumb"></span></span></label> */
.ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    color: var(--md-on-surface);
}
.ui-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.ui-switch-track {
    width: 38px;
    height: 20px;
    background: #9097a1; /* grigio pieno fisso: visibile su qualsiasi tema/sfondo (non dipende dalle variabili colore) */
    border-radius: 100px;
    position: relative;
    transition: background .15s;
    flex-shrink: 0;
}
.ui-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.ui-switch input[type="checkbox"]:checked + .ui-switch-track {
    background: var(--md-primary, #032b30);
}
.ui-switch input[type="checkbox"]:checked + .ui-switch-track .ui-switch-thumb {
    transform: translateX(18px);
}
.ui-switch input[type="checkbox"]:disabled + .ui-switch-track { opacity: .5; }
.ui-switch-lbl { font-weight: 500; }
/* Dentro un .field la regola ".field label { display:block }" vinceva su .ui-switch
   (inline-flex) per specificità, rompendo il layout flex: il track (flex-item) collassava
   e restava visibile solo il pallino, sovrapposto al testo. Qui ripristino lo switch. */
.field label.ui-switch { display: inline-flex; margin-bottom: 0; color: var(--md-on-surface); font-size: .9rem; }
/* Variante con etichetta su entrambi i lati (es. Host/Cloudinary, Chiaro/Scuro) */
.ui-switch-flank { gap: .9rem; }
.ui-switch-side { font-size: .82rem; color: var(--md-on-surface-variant); transition: color .15s; white-space: nowrap; }
.ui-switch-side.on { color: var(--md-on-surface); font-weight: 600; }

/* Cockpit per attività workshop/corso: stesso stile della maratona ma con KPI invece di countdown */
.cockpit-attivita {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}
.cockpit-attivita .cockpit-title {
    flex: 1;
    min-width: 0;
}
.cockpit-att-kpi {
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: 0.6rem;
    flex-shrink: 0;
}
.cockpit-att-kpi-item {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    text-align: center;
    min-width: 90px;
}
.cockpit-att-kpi-lbl {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-bottom: 0.15rem;
}
.cockpit-att-kpi-val {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.1;
}


/* Menu kebab (3 puntini orizzontali) per azioni secondarie */
.kebab-wrap { position: relative; display: inline-block; }
.kebab-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--md-surface-variant);
    border: 1px solid var(--md-outline-variant);
    color: var(--md-on-surface);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
    padding: 0;
    line-height: 1;
}
.kebab-btn:hover { background: var(--md-outline-variant); border-color: var(--md-outline); }
.kebab-btn.is-open { background: var(--md-primary-container); border-color: var(--md-primary); }
.kebab-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.35rem 0;
    z-index: 50;
    display: none;
    animation: kebabFade .14s ease-out;
}
.kebab-menu.is-open { display: block; }
@keyframes kebabFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.kebab-item {
    display: flex; align-items: center; gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.95rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    color: var(--md-on-surface);
    transition: background .12s;
}
.kebab-item:hover { background: var(--md-surface-variant); }
.kebab-item.danger { color: var(--md-error, #b3261e); }
.kebab-item.danger:hover { background: rgba(179, 38, 30, 0.08); }
.kebab-sep { height: 1px; background: var(--md-outline-variant); margin: 0.3rem 0; }

/* === Voci di spesa: toggle vista Testo/Tabella === */
.seg-toggle {
    display: inline-flex;
    background: var(--md-surface-variant);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.seg-btn {
    border: none;
    background: transparent;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--md-on-surface-variant);
}
.seg-btn.is-active {
    background: var(--md-primary);
    color: white;
}
.descr-txt-toolbar {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.descr-txt-editor {
    min-height: 90px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--md-outline);
    border-radius: 8px;
    background: var(--md-surface);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    outline: none;
}
.descr-txt-editor:focus { border-color: var(--md-primary); }
.descr-txt-editor a { color: var(--md-primary); text-decoration: underline; }
.descr-tab-head {
    display: flex;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0 0.3rem;
    margin-bottom: 0.3rem;
}
.descr-tab-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    align-items: stretch;
}
.descr-tab-row .tab-d { flex: 2; }
.descr-tab-row .tab-i { flex: 0 0 90px; }
.descr-tab-row .tab-l { flex: 2; }
.descr-tab-row .tab-del { flex: 0 0 30px; }
.descr-tab-row input {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    background: var(--md-surface);
    font-family: inherit;
    font-size: 0.9rem;
}

/* Riga link/copia condivisa: usata sia in modali admin (share spesa) sia altrove.
   Replica lo stile della stessa classe in marathon.css per coerenza visiva. */
.att-link-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
    align-items: stretch;
}
.att-link-row input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: monospace;
    background: var(--md-surface);
    color: var(--md-on-surface);
}
.att-link-row button {
    padding: 0.6rem 1rem;
    white-space: nowrap;
}

/* === Newsletter: tab e cruscotto === */




.nl-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.nl-kpi {
    background: var(--md-surface-variant);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
}
.nl-kpi-val { font-size: 1.8rem; font-weight: 800; color: var(--md-primary); line-height: 1; }
.nl-kpi-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--md-on-surface-variant); margin-top: 0.35rem; }
.nl-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--md-outline-variant);
}
.nl-list-item:last-child { border-bottom: none; }


/* ===== Newsletter ===== */




.nl-tab-body-legacy { min-height: 200px; }
.nl-kpi-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.nl-kpi { flex: 1; min-width: 120px; text-align: center; }
.nl-kpi-val { font-size: 1.8rem; font-weight: 800; color: var(--md-primary); }
.nl-kpi-lbl { font-size: .78rem; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .5px; margin-top: .25rem; }
.nl-builder-head { margin-bottom: 1rem; }
.nl-list { display: flex; flex-direction: column; gap: .5rem; }
.nl-list-item {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .75rem 1rem; background: var(--md-surface-variant); border-radius: 10px;
}
.nl-list-main { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.nl-list-actions { display: flex; gap: .35rem; align-items: center; flex-shrink: 0; }
.nl-badge { font-size: .75rem; padding: .15rem .5rem; background: var(--md-surface); border-radius: 20px; color: var(--md-on-surface-variant); }
.nl-editor .field { margin-bottom: .85rem; }
.nl-editor-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.nl-anteprima { margin-top: 1rem; }
.nl-anteprima-label { font-size: .8rem; color: var(--md-on-surface-variant); margin-bottom: .35rem; }
.nl-link-card { margin-top: 0; }
.nl-diag { padding: .6rem .85rem; border-radius: 8px; font-size: .85rem; margin-bottom: .85rem; }
.nl-diag-ok { background: rgba(46,125,50,.12); color: #2e7d32; }
.nl-diag-err { background: rgba(179,38,30,.1); color: var(--md-error, #b3261e); }

/* Campo password con toggle mostra/nascondi */
.pw-input-wrap { position: relative; display: flex; align-items: center; }
.pw-input-wrap input { flex: 1; padding-right: 2.8rem; }
.pw-toggle {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer; font-size: 1.1rem;
    opacity: .6; padding: .25rem; line-height: 1;
}
.pw-toggle:hover { opacity: 1; }

/* ===== Newsletter: editor WYSIWYG ===== */
.nl-wysiwyg {
    border: 1px solid var(--md-outline-variant);
    border-radius: 10px;
    overflow: hidden;
    background: var(--md-surface);
}
.nl-wys-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: .4rem .5rem;
    background: var(--md-surface-variant);
    border-bottom: 1px solid var(--md-outline-variant);
}
.nl-wys-toolbar button {
    min-width: 32px; height: 32px;
    border: none; background: transparent; cursor: pointer;
    border-radius: 6px; font-size: .9rem; color: var(--md-on-surface);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .4rem; transition: background .12s;
}
.nl-wys-toolbar button:hover { background: var(--md-surface); }
.nl-wys-sep { width: 1px; height: 20px; background: var(--md-outline-variant); margin: 0 .25rem; }
.nl-wys-area {
    min-height: 240px; max-height: 480px; overflow-y: auto;
    padding: 1rem; font-size: .95rem; line-height: 1.6;
    color: var(--md-on-surface); outline: none;
}
.nl-wys-area:focus { background: var(--md-surface); }
.nl-wys-area h1 { font-size: 1.5rem; margin: .5rem 0; }
.nl-wys-area h2 { font-size: 1.2rem; margin: .5rem 0; }
.nl-wys-area p { margin: .5rem 0; }
.nl-wys-area img { max-width: 100%; height: auto; border-radius: 6px; }
.nl-wys-area a { color: var(--md-primary); }
.nl-wys-html {
    width: 100%; border: none; padding: 1rem;
    font-family: monospace; font-size: .82rem; line-height: 1.5;
    color: var(--md-on-surface); background: var(--md-surface); outline: none;
    resize: vertical;
}

/* ===== Newsletter: builder a blocchi ===== */

.nlb { display: grid; grid-template-columns: 190px 1fr 290px; gap: .75rem; min-height: 280px; }
.nlb-palette { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; align-content: start; overflow-y: auto; max-height: var(--nlb-colh, calc(100vh - 340px)); min-height: 280px; }
.nlb-pal-item {
    padding: .45rem .5rem; border: 1.5px solid var(--md-outline-variant);
    background: var(--md-surface-variant); border-radius: 10px; cursor: grab;
    font-size: .76rem; text-align: left; color: var(--md-on-surface); font-family: inherit;
}
.nlb-pal-item:hover { border-color: var(--md-primary); }
.nlb-pal-item:active { cursor: grabbing; }

.nlb-canvas-wrap { background: #f4f4f4; border-radius: 12px; padding: .75rem; overflow-y: auto; max-height: var(--nlb-colh, calc(100vh - 340px)); min-height: 280px; }
.nlb-canvas { min-height: 200px; }
.nlb-canvas.nlb-dragover { outline: 2px dashed var(--md-primary); outline-offset: -4px; }
.nlb-empty { text-align: center; color: #999; padding: 3rem 1rem; font-size: .9rem; }

.nlb-block { background: #fff; border-radius: 8px; margin-bottom: .5rem; border: 2px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden; }
.nlb-block.selected { border-color: var(--md-primary); }
.nlb-block-bar { display: flex; justify-content: space-between; align-items: center; padding: .25rem .5rem; background: var(--md-surface-variant); font-size: .72rem; }
.nlb-block-label { color: var(--md-on-surface-variant); font-weight: 600; }
.nlb-block-actions button {
    border: none; background: transparent; cursor: pointer; font-size: .85rem;
    width: 24px; height: 24px; border-radius: 5px; color: var(--md-on-surface-variant);
}
.nlb-block-actions button:hover { background: var(--md-surface); }
.nlb-block-actions button.danger:hover { background: #fde8e8; color: #c0392b; }
.nlb-block-preview { padding: .25rem; cursor: pointer; }
.nlb-ph { background: repeating-linear-gradient(45deg,#f7f7f7,#f7f7f7 8px,#efefef 8px,#efefef 16px); color: #999; text-align: center; padding: 1.5rem 1rem; border-radius: 6px; font-size: .85rem; }

.nlb-props { background: var(--md-surface-variant); border-radius: 12px; padding: .75rem; overflow-y: auto; max-height: var(--nlb-colh, calc(100vh - 340px)); min-height: 280px; }
.nlb-align { display: inline-flex; gap: 5px; }
.nlb-align-btn { width: 38px; height: 32px; border: 1.5px solid var(--md-outline-variant); background: var(--md-surface); border-radius: 7px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 7px; }
.nlb-align-btn.on { border-color: var(--md-primary); background: var(--md-primary-container); }
.nlb-align-btn i { display: block; height: 2px; background: var(--md-on-surface); opacity: .65; border-radius: 2px; }
.nlb-align-btn i:nth-child(1) { width: 100%; }
.nlb-align-btn i:nth-child(2) { width: 65%; }
.nlb-align-btn i:nth-child(3) { width: 85%; }
.nlb-align-btn[data-val="center"] i { margin: 0 auto; }
.nlb-align-btn[data-val="right"] i { margin-left: auto; }
.nlb-props-empty { color: var(--md-on-surface-variant); font-size: .82rem; text-align: center; padding: 2rem .5rem; }
.nlb-props-title { font-weight: 700; font-size: .9rem; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--md-outline-variant); }
.nlb-f { display: block; margin-bottom: .65rem; }
.nlb-f > span { display: block; font-size: .72rem; color: var(--md-on-surface-variant); margin-bottom: .2rem; font-weight: 600; }
.nlb-f input, .nlb-f select, .nlb-f textarea {
    width: 100%; padding: .4rem .5rem; border: 1px solid var(--md-outline-variant);
    border-radius: 7px; font-size: .85rem; background: var(--md-surface); color: var(--md-on-surface); font-family: inherit;
}
.nlb-f input[type=color] { height: 34px; padding: 2px; cursor: pointer; }
.nlb-upload-btn {
    width: 100%; padding: .45rem; margin-bottom: .65rem; border: 1px dashed var(--md-outline);
    background: var(--md-surface); border-radius: 7px; cursor: pointer; font-size: .8rem;
    color: var(--md-primary); font-family: inherit;
}
.nlb-upload-btn:hover { background: var(--md-primary-container); }



/* ===== Newsletter: layout testata + tab sulla stessa riga ===== */




.nl-head .nl-tab:not(.active):hover { opacity: 1; }

/* Il corpo dei tab è un pannello connesso alle linguette (come le schede del browser) */


/* KPI piccoli */
.nl-kpi-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.nl-kpi { flex: 1; min-width: 90px; background: var(--md-surface-variant); border-radius: 12px; padding: .6rem .75rem; text-align: center; }
.nl-kpi-val { font-size: 1.3rem; font-weight: 800; color: var(--md-primary); }
.nl-kpi-lbl { font-size: .68rem; color: var(--md-on-surface-variant); text-transform: uppercase; letter-spacing: .4px; margin-top: .1rem; }

/* Bento grid */
.nl-bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nl-bento { background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; }
.nl-bento-wide, .nl-bento-full { grid-column: 1 / -1; }
.nl-bento-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.nl-bento-head h3 { margin: 0; font-size: 1rem; }
.nl-bento-head .btn-secondary { margin-left: auto; }
.nl-bento-body { flex: 1; overflow-y: auto; max-height: 320px; }
.nl-empty { color: var(--md-on-surface-variant); font-size: .88rem; padding: 1rem .25rem; text-align: center; }

/* Builder: contenitore unico (niente doppia bento), layout compatto */
.nl-builder-wrap { display: flex; flex-direction: column; gap: .6rem; }
.nl-builder-top { display: flex; align-items: center; }
.nl-builder-fields { margin: 0; }
.nl-builder-fields .field { margin: 0; }
/* Lo stage del builder occupa lo spazio rimasto e gestisce lo scroll internamente */
.nl-builder-stage { flex: 1; min-height: 0; }

.nl-row { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .65rem; border-radius: 10px; margin-bottom: .4rem; background: var(--md-surface-variant); position: relative; }
.nl-row-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-right: 90px; }
.nl-row-sub { font-size: .76rem; color: var(--md-on-surface-variant); padding-right: 90px; }
.nl-row-actions { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .2rem; }
.nl-badge { font-size: .68rem; padding: .1rem .45rem; background: var(--md-surface); border-radius: 20px; color: var(--md-on-surface-variant); }



.nl-check { display: flex; align-items: center; gap: .5rem; margin: .75rem 0 .25rem; cursor: pointer; font-size: .9rem; }
.nl-check input { width: 18px; height: 18px; cursor: pointer; }

/* Selettore anno storico */
.nl-anno-sel { margin-left: auto; padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface); font-family: inherit; font-size: .85rem; }
/* Righe modello di sistema (⭐): sfondo leggermente diverso, non eliminabili */
.nl-row-sys { background: color-mix(in srgb, var(--md-primary) 8%, var(--md-surface-variant)); }
/* Mobile: tab vanno a capo sotto il titolo */


/* ===== Builder: editing inline + tag + hint ===== */
.nlb-edit {
    outline: none; min-height: 1.2em; cursor: text;
    border-radius: 4px; transition: box-shadow .15s;
}
.nlb-edit:hover { box-shadow: 0 0 0 1px var(--md-outline-variant); }
.nlb-edit:focus { box-shadow: 0 0 0 2px var(--md-primary); background: rgba(103,80,164,.04); }
.nlb-tagbar { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--md-outline-variant); }
.nlb-tagbar-lbl { font-size: .72rem; color: var(--md-on-surface-variant); width: 100%; margin-bottom: .15rem; font-weight: 600; }
.nlb-tag {
    font-size: .72rem; padding: .2rem .45rem; border: 1px solid var(--md-primary);
    background: var(--md-primary-container); color: var(--md-primary);
    border-radius: 6px; cursor: pointer; font-family: monospace;
}
.nlb-tag:hover { background: var(--md-primary); color: var(--md-on-primary); }
.nlb-img-hint { font-size: .72rem; color: var(--md-on-surface-variant); margin: -.4rem 0 .6rem; line-height: 1.4; }
.btn-secondary.active-preview { background: var(--md-primary); color: var(--md-on-primary); }

/* Pulsante Aggiorna nella testata newsletter (coerente con la pagina attività) */
.nl-head-refresh { margin: 0 0 .5rem 0; align-self: flex-end; }
/* Pulsante rotondo nella testata: allineato al titolo, non al fondo delle tab */
.nl-head > .btn-round { align-self: center; margin: 0 0 .35rem 0; }


/* Stati programmazione: badge colorati */
.nl-badge-bozza { background: #fff3cd; color: #8a6d00; font-weight: 600; }
.nl-badge-programmata { background: var(--md-primary-container); color: var(--md-primary); }
.nl-badge-reminder { background: #fde8c8; color: #8a5a00; }
.nl-row-reminder { opacity: .92; }
.rimb-gruppi { display: flex; flex-direction: column; }
.rimb-socio { padding: .6rem 0; border-bottom: 1px solid var(--md-outline-variant); }
.rimb-socio:last-child { border-bottom: none; }
.rimb-socio-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.rimb-socio-name { font-weight: 700; }
.rimb-socio-n { font-size: .75rem; color: var(--md-on-surface-variant); }
.rimb-salda-all { margin-left: auto; background: var(--md-success, #2e7d32); color: #fff; border: none; border-radius: 8px; padding: .25rem .6rem; font-size: .75rem; font-weight: 600; cursor: pointer; }
.rimb-salda-all:hover { filter: brightness(1.08); }
.rimb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.rimb-item { display: flex; align-items: center; gap: .5rem; padding-left: 1rem; position: relative; font-size: .9rem; }
.rimb-item::before { content: "•"; position: absolute; left: .2rem; color: var(--md-on-surface-variant); }
.rimb-item-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rimb-item-txt small { opacity: .7; }
.rimb-item-meta { flex: 0 0 auto; color: var(--md-on-surface-variant); font-size: .82rem; white-space: nowrap; }
.rimb-item-acts { flex: 0 0 auto; display: flex; gap: .25rem; }
.rimb-item-acts .btn-icon { width: 30px; height: 30px; padding: 0; font-size: .9rem; }
.track-head { display:flex; align-items:center; gap:1rem; margin-bottom:.3rem; }
.track-hint { font-size:.82rem; color:var(--md-on-surface-variant); margin:.2rem 0 1rem; line-height:1.5; }
.track-hint code { background:var(--md-surface-variant); padding:.05rem .35rem; border-radius:5px; }
.track-table { width:100%; border-collapse:collapse; }
.track-table th { text-align:center; font-size:.76rem; text-transform:uppercase; letter-spacing:.3px; color:var(--md-on-surface-variant); padding:.4rem .5rem; border-bottom:1px solid var(--md-outline-variant); }
.track-table td { padding:.4rem .5rem; border-bottom:1px solid var(--md-outline-variant); vertical-align:middle; text-align:center; }
.track-table input.trk-f:not([type=checkbox]) { width:100%; padding:.4rem .5rem; border:1px solid var(--md-outline-variant); border-radius:8px; background:var(--md-surface); color:inherit; font-size:.88rem; text-align:center; }
.track-table .trk-slug { max-width:160px; margin:0 auto; }
.trk-attivo { width:18px; height:18px; cursor:pointer; }
.trk-toggle span { display:none; }
.trk-visite { font-weight:700; text-align:center; }
.trk-actions { white-space:nowrap; display:flex; gap:.25rem; align-items:center; justify-content:center; }
.trk-applica { background:var(--md-primary); color:#fff; border:none; outline:none; border-radius:6px; padding:0 .7rem; height:26px; line-height:26px; font-size:.78rem; font-weight:600; cursor:pointer; font-family:inherit; vertical-align:middle; }
.trk-applica:hover { filter:brightness(1.07); }
.trk-applica[disabled] { opacity:.6; cursor:default; }
/* Pulsanti azione: di default copia+cestino; quando la riga è modificata compare Applica */
.trk-actions .trk-applica { display:none; }
.trk-row.trk-dirty .trk-copy, .trk-row.trk-dirty .trk-del, .trk-row.trk-dirty .trk-reset { display:none; }
.trk-row.trk-dirty .trk-applica { display:inline-block; }
.trk-reset svg { width:18px; height:18px; display:block; }
.trk-actions .gal-ic { width:18px; height:18px; }
.trk-actions .btn-icon { color:inherit; }
.btn-add-refresh::before, .btn-add-refresh::after { display: none; } /* niente "+" */
.btn-add-refresh svg { width: 18px; height: 18px; display: block; }
.trk-refresh[disabled] { opacity: .5; cursor: default; }
.trk-spin { animation: trkSpin .8s linear infinite; }
@keyframes trkSpin { to { transform: rotate(360deg); } }
.trk-row-sys { background: var(--md-primary-container); }
.trk-row-sys input.trk-f[readonly] { background: transparent; border-color: transparent; font-weight:600; cursor:default; }
.nl-badge-completata { background: #d8f5dd; color: #1b7a32; }
.nl-badge-annullata { background: var(--md-surface-variant); color: var(--md-on-surface-variant); }
.nl-row-bozza { border-left: 3px solid #e0a800; }

/* ===== Flusso bozza → programmazione ===== */
.btn-conferma {
    border: none; background: var(--md-primary); color: var(--md-on-primary);
    border-radius: 8px; padding: .35rem .7rem; font-size: .8rem; font-weight: 600;
    cursor: pointer; font-family: inherit; white-space: nowrap; transition: transform .12s, background .15s;
}
.btn-conferma:hover { background: var(--md-primary-dark, #51389c); transform: translateX(2px); }
/* Animazione: la riga bozza scivola a destra e svanisce */
.nl-row.nl-slide-out {
    transform: translateX(60px); opacity: 0;
    transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s ease;
}
/* Modale compatta per la programmazione */
.modal-card.nl-modal-compact { max-width: 360px; }
.nl-quando-scelta { display: flex; gap: .5rem; margin-top: .5rem; }
.nl-radio { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border: 1.5px solid var(--md-outline-variant); border-radius: 10px; cursor: pointer; font-size: .88rem; flex: 1; justify-content: center; }
.nl-radio:has(input:checked) { border-color: var(--md-primary); background: var(--md-primary-container); color: var(--md-primary); font-weight: 600; }
.nl-input-compact { width: auto; max-width: 230px; padding: .5rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-family: inherit; }
/* Modelli di sistema nella bento builder */
.nl-row-sys { background: var(--md-primary-container); border-radius: 8px; }

/* ===== Builder: modale Tag + toolbar formattazione ===== */
.nlb-tag-list { display: flex; flex-direction: column; gap: .5rem; }
.nlb-tag-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--md-outline-variant); border-radius: 10px; }
.nlb-tag-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.nlb-tag-nome { font-size: .85rem; font-weight: 600; color: var(--md-on-surface); }
.nlb-tag-code { font-family: monospace; font-size: .8rem; color: var(--md-primary); }
.nlb-fmtbar { display: flex; gap: .25rem; align-items: center; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--md-outline-variant); }
.nlb-fmt { width: 30px; height: 30px; border: 1px solid var(--md-outline-variant); background: var(--md-surface); border-radius: 6px; cursor: pointer; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.nlb-fmt:hover { background: var(--md-surface-variant); }
.nlb-fmt-color { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; font-size: .9rem; position: relative; padding: 0 .25rem; }
.nlb-fmt-colorinput { width: 24px; height: 24px; border: none; padding: 0; cursor: pointer; background: none; }

/* Badge iscritto di test */
.nl-badge-test { background: #e0f2fe; color: #075985; font-size: .7rem; padding: .1rem .4rem; border-radius: 6px; font-weight: 600; margin-left: .25rem; }

/* ===== Builder: barra sfondi documento + drag riordino ===== */
.nlb-docbar { display: flex; gap: 1rem; flex-wrap: wrap; padding: .5rem .25rem .75rem; margin-bottom: .5rem; border-bottom: 1px dashed var(--md-outline-variant); }
.nlb-docbg { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--md-on-surface-variant); cursor: pointer; }
.nlb-docbg input[type=color] { width: 26px; height: 22px; border: 1px solid var(--md-outline-variant); border-radius: 5px; padding: 0; cursor: pointer; }
.nlb-drag-handle { cursor: grab; color: var(--md-on-surface-variant); font-size: 1rem; padding: 0 .35rem; user-select: none; }
.nlb-drag-handle:active { cursor: grabbing; }
/* Trascinamento: il blocco preso si rimpicciolisce, gli altri fanno spazio */
.nlb-block { transition: transform .16s ease, opacity .16s ease, margin .16s ease, box-shadow .12s ease; }
.nlb-block.nlb-dragging {
    opacity: .55;
    transform: scale(.94);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    cursor: grabbing;
}
/* Spazio che si apre durante il trascinamento: i blocchi successivi scorrono
   in giù e si vede dove finirà il blocco ancora prima di rilasciarlo. */
.nlb-segnaposto {
    border: 2px dashed var(--md-primary);
    border-radius: 10px;
    background: color-mix(in srgb, var(--md-primary) 10%, transparent);
    margin: .35rem 0;
    animation: nlbApriSpazio .18s ease;
}
@keyframes nlbApriSpazio { from { height: 0 !important; opacity: 0; } to { opacity: 1; } }
/* Dopo lo zoom il blocco si chiude, lasciando il posto al segnaposto */
.nlb-block.nlb-collassato {
    max-height: 0 !important;
    margin-top: 0 !important; margin-bottom: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    overflow: hidden;
    opacity: 0;
    transition: max-height .18s ease, opacity .18s ease, margin .18s ease, padding .18s ease;
}
/* Assestamento del blocco appena posizionato */
@keyframes nlbAtterra {
    0% { transform: scale(.94); opacity: .6; }
    60% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.nlb-block.nlb-appena-spostato { animation: nlbAtterra .28s ease; }
@media (prefers-reduced-motion: reduce) {
    .nlb-block, .nlb-block.nlb-appena-spostato { transition: none; animation: none; }
}

/* ===== Pagina Modelli: 2 colonne 2:1 ===== */
.nl-modelli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
/* Colori specifici per ogni tab Newsletter (scope sul body della tab, niente leak su altre pagine) */
.nl-tab-panoramica .nl-bento-wide, .nl-tab-panoramica .nl-bento-full { background: #ededed; }
.nl-tab-panoramica .nl-bento-storico { background: #f5f5f5; }
.nl-tab-panoramica .nl-bento-wide .nl-row, .nl-tab-panoramica .nl-bento-full .nl-row { background: #ffffff; }
.nl-tab-modelli .nl-modelli-grid .nl-bento { background: #ffffff; }
.nl-tab-modelli .nl-modelli-grid .nl-bento .nl-row { background: #f5f5f5; }
.nl-tab-modelli .nl-modelli-grid .nl-bento-sys { background: #f5f5f5; }
.nl-tab-modelli .nl-modelli-grid .nl-bento-sys .nl-row { background: #ffffff; }
.nl-tab-body.nl-tab-impostazioni { background: #efefef; }


/* Maratona: temi raggruppati nella stessa finestra */
.m-gruppo-tema { font-size: .92em; margin: 2px 0; }

/* Maratona: gruppi di temi (admin) — il gruppo è una bento esterna bianca che
   racchiude i suoi temi; i titoli dei temi sono grigio chiaro per contrasto. */
.gruppi-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .6rem; }
.gruppo-card { border: 1px solid var(--md-outline-variant); border-radius: 12px; padding: .6rem .7rem; background: #fff; }
.gruppo-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gruppo-titolo { font-weight: 700; }
.gruppo-meta { font-size: .78rem; color: var(--md-on-surface-variant); }
.gruppo-temi { margin: .5rem 0; display: flex; flex-direction: column; gap: .25rem; }
.gruppo-tema-row { font-size: .85rem; padding: .35rem .5rem; background: #f1f1f3; border-radius: 6px; }
.gruppo-actions { display: flex; gap: .25rem; justify-content: flex-end; }

/* === COCKPIT MARATONA — titolo+tema sx · countdown anello AL CENTRO · player dx === */
/* Griglia 3 colonne: le laterali (1fr) si bilanciano, la centrale resta nel mezzo esatto */
.cockpit-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.cockpit-title { min-width: 0; grid-column: 1; }
.cockpit-countdown { grid-column: 2; justify-self: center; }
.cockpit-player { grid-column: 3; justify-self: end; }
.cockpit-tema-grande {
    font-size: 1.5rem; font-weight: 800; line-height: 1.15; margin-top: .4rem;
    color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
/* Countdown circolare con anello che ruota — nessuno sfondo, solo l'anello */
.cockpit-countdown { position: relative; width: 150px; height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; }
.cockpit-ring { width: 150px; height: 150px; transform: rotate(-90deg); }
.cockpit-ring-bg { fill: none; stroke: rgba(255,255,255,0.25); stroke-width: 8; }
.cockpit-ring-fg {
    fill: none; stroke: #fff; stroke-width: 8;
    stroke-linecap: round; transition: stroke-dashoffset 1s linear;
}
.cockpit-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cockpit-ring-center .cockpit-cd-num { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.cockpit-ring-center .cockpit-cd-lbl { font-size: .7rem; color: rgba(255,255,255,0.85); margin-top: .15rem; }

/* Pulsanti stile riproduttore musicale (alti) */
.cockpit-player { display: flex; gap: .6rem; flex-shrink: 0; }
.cockpit-player-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    min-width: 76px; min-height: 76px; padding: .6rem .8rem;
    border: none; border-radius: 16px; cursor: pointer;
    background: rgba(255,255,255,0.92); color: var(--md-on-surface);
    font-size: .72rem; font-weight: 600; transition: transform .12s, background .15s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.cockpit-player-btn:hover { transform: translateY(-2px); }
.cockpit-player-btn .cpb-icon { font-size: 1.5rem; line-height: 1; }
.cockpit-player-play { background: #fff; color: var(--md-primary); }
.cockpit-player-stop { background: var(--md-error, #dc2626); color: #fff; }
.cockpit-player-disabled { opacity: .4; cursor: not-allowed; }
.cockpit-player-disabled:hover { transform: none; }

/* Footer cockpit: pulsante Modifica dentro la colonna titolo, piccolo spazio sopra */
.cockpit-footer { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.cockpit-mini-btn {
    background: rgba(255,255,255,0.92); border: none; border-radius: 8px;
    padding: .35rem .7rem; font-size: .8rem; cursor: pointer; color: var(--md-on-surface);
    line-height: 1.4; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: background .15s, transform .1s;
}
.cockpit-mini-btn:hover { background: #fff; }
.cockpit-mini-btn:active { transform: scale(0.97); }
/* Stato "attesa" (non avviata): countdown compatto, niente anello da 150px che gonfia */
.cockpit-attesa .cockpit-countdown { width: auto; height: auto; min-width: 90px; }

/* Cockpit: due pulsanti impilati nella stessa altezza di uno (Anticipa Consegna + Salta Sessione) */
.cockpit-player-stack { display: flex; flex-direction: column; gap: .4rem; }
.cockpit-player-half {
    min-height: 0; flex-direction: row; gap: .4rem; min-width: 130px;
    padding: .45rem .7rem; font-size: .72rem;
}
.cockpit-player-half .cpb-icon { font-size: 1rem; }

/* Etichetta sezione nella lista temi/sessioni (admin) */
.sezione-label { font-size: .78rem; font-weight: 600; color: var(--md-on-surface-variant); margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .3px; }

/* Textarea temi con numerazione "N)" a sinistra, sincronizzata riga per riga */
.temi-input-wrap { display: flex; border: 1px solid var(--md-outline-variant); border-radius: 8px; overflow: hidden; background: var(--md-surface); }
.temi-input-wrap .temi-gutter {
    flex-shrink: 0; width: 38px; padding: 8px 4px; text-align: right; overflow: hidden;
    background: var(--md-surface-variant); color: var(--md-on-surface-variant);
    font-family: monospace; font-size: 14px; line-height: 1.5; user-select: none;
}
.temi-input-wrap .temi-gutter span { display: block; padding-right: 4px; }
.temi-input-wrap textarea {
    flex: 1; border: none; outline: none; resize: vertical; padding: 8px 10px;
    font-family: inherit; font-size: 14px; line-height: 1.5; background: transparent;
}

/* Modale Gestione Sessione di Scatto: layout orizzontale (temi sx · sessioni dx) */
.gestione-sessioni-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .75rem; }
/* Altezza minima costante: la modale non si raggrinzisce con pochi temi,
   e cresce fino al limite della modale (max-height 80vh) con tanti. */
.gestione-sessioni-grid > .bento-card { min-height: 360px; display: flex; flex-direction: column; }
.gestione-sessioni-grid > .bento-card > div[style*="overflow"] { flex: 1; }
/* I testi lunghi dei temi vanno a capo invece di allargare la colonna */
.gestione-sessioni-grid .nl-check { align-items: flex-start; }
.gestione-sessioni-grid .nl-check span { overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
.gestione-sessioni-grid .sessione-tema-row { overflow-wrap: anywhere; word-break: break-word; }

/* Card sessione: badge tondo numerato + durata + azioni */
.sessione-card { border: 1px solid var(--md-outline-variant); border-radius: 10px; padding: .55rem .65rem; margin-bottom: .5rem; background: #fff; }
.sessione-head { display: flex; align-items: center; gap: .5rem; }
.sessione-badge {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--md-primary); color: #fff; font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sessione-durata { font-size: .82rem; color: var(--md-on-surface-variant); }
.sessione-actions { margin-left: auto; display: flex; gap: .2rem; }
.sessione-temi { margin-top: .45rem; display: flex; flex-direction: column; gap: .25rem; }
.sessione-tema-row { font-size: .85rem; padding: .3rem .5rem; background: #f1f1f3; border-radius: 6px; }

/* Toolbar modale sessioni (stile bozza: chiudi · durata pill · crea · massiva · applica) */
.sessioni-toolbar { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.sessioni-toolbar .st-btn-plain { margin-right: auto; }
.sessioni-toolbar .st-btn-primary { margin-left: auto; }
/* Bottone con icona tonda scura a sinistra e label a due righe */
.st-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--md-outline-variant); border-radius: 999px;
    padding: .3rem .9rem .3rem .35rem; cursor: pointer; font-size: .82rem; font-weight: 600;
    color: var(--md-on-surface); line-height: 1.1; transition: background .15s, transform .1s;
}
.st-btn:hover { background: var(--md-surface-variant); }
.st-btn:active { transform: scale(0.97); }
.st-btn-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--md-primary); color: #fff; font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.st-btn-label { text-align: left; }
/* Bottoni testuali semplici (Chiudi / Applica) */
.st-btn-plain { background: #fff; border: 1px solid var(--md-outline-variant); border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; font-size: .9rem; color: var(--md-on-surface); }
.st-btn-plain:hover { background: var(--md-surface-variant); }
.st-btn-primary { background: var(--md-primary); color: #fff; border: none; border-radius: 999px; padding: .6rem 1.4rem; cursor: pointer; font-size: .95rem; font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,0.18); }
.st-btn-primary:hover { filter: brightness(1.08); }
/* Pill durata: icona tonda + label + input numerico inline */
.st-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff; border: 1px solid var(--md-outline-variant); border-radius: 999px;
    padding: .3rem .9rem .3rem .35rem; font-size: .82rem; font-weight: 600; color: var(--md-on-surface); line-height: 1.1;
}
.st-pill-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--md-primary); color: #fff; font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.st-pill-input {
    width: 48px; border: none; background: var(--md-surface-variant); border-radius: 8px;
    padding: .25rem .4rem; text-align: center; font-size: .9rem; font-weight: 700; color: var(--md-on-surface);
}
.st-pill-input:focus { outline: 2px solid var(--md-primary); }
.st-pill-unit { color: var(--md-on-surface-variant); font-weight: 500; }


/* Modale conferma/avviso interna (sostituisce confirm()/alert() del browser) */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
    animation: cfFade .15s ease;
}
@keyframes cfFade { from { opacity: 0 } to { opacity: 1 } }
.confirm-box {
    background: var(--md-surface); color: var(--md-on-surface);
    border-radius: 16px; padding: 1.4rem 1.4rem 1.1rem; max-width: 420px; width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    animation: cfUp .18s ease;
}
@keyframes cfUp { from { transform: translateY(14px); opacity: .6 } to { transform: translateY(0); opacity: 1 } }
.confirm-title { margin: 0 0 .5rem; font-size: 1.1rem; }
.confirm-msg { margin: 0 0 1.2rem; font-size: .94rem; line-height: 1.45; color: var(--md-on-surface-variant); }
.confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.confirm-btn-danger { background: var(--md-error, #dc2626) !important; }

/* Righe criteri di valutazione: pill coerenti con la grafica */
.criterio-row {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem;
    background: var(--md-surface-variant); border-radius: 100px; padding: .35rem .5rem .35rem .85rem;
}
.criterio-drag { color: var(--md-on-surface-variant); font-size: 1.1rem; cursor: default; user-select: none; opacity: .5; }
.criterio-input {
    flex: 1; border: none; background: transparent; font-family: inherit; font-size: .95rem;
    color: var(--md-on-surface); padding: .35rem 0; outline: none;
}
.criterio-row .btn-icon.danger { flex-shrink: 0; }

/* Riga partecipante eliminato (soft-delete): tracciata ma attenuata */
.part-row-eliminato { background: var(--md-surface-variant, #f5f5f5); opacity: .85; }

/* ============ NOTIFICHE (campanella + popover) ============ */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell { position: relative; font-size: 1.15rem; }
/* Campanella spenta (grigia) di default, gialla quando ci sono notifiche attive */
.notif-bell-ico { display: inline-block; filter: grayscale(1); opacity: .5; transition: filter .2s ease, opacity .2s ease, transform .2s ease; }
.notif-bell:hover .notif-bell-ico { opacity: .8; }
.notif-bell.has-notif .notif-bell-ico { filter: none; opacity: 1; }
.notif-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--md-error, #b3261e); color: #fff;
    border-radius: 999px; font-size: 0.66rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1; box-shadow: 0 0 0 2px var(--md-primary);
}
.notif-badge[hidden] { display: none !important; }
.notif-pop {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: min(360px, calc(100vw - 24px));
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    z-index: 1200; overflow: hidden;
}
.notif-pop-head {
    padding: .8rem 1rem; font-weight: 700; color: var(--md-on-surface);
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-variant);
}
.notif-pop-body { max-height: 340px; overflow-y: auto; padding: .4rem; }
.notif-item {
    display: flex; gap: .6rem; align-items: flex-start;
    width: 100%; text-align: left; background: transparent;
    border: none; border-radius: 10px; padding: .6rem .65rem;
    cursor: pointer; color: var(--md-on-surface);
}
.notif-item:hover { background: var(--md-surface-variant); }
.notif-item-ico { font-size: 1.15rem; flex: 0 0 auto; line-height: 1.2; }
.notif-item-txt { font-size: .88rem; line-height: 1.3; display: flex; flex-direction: column; gap: 2px; }
.notif-item-time { font-size: .72rem; color: var(--md-on-surface-variant); }
.notif-empty { text-align: center; color: var(--md-on-surface-variant); padding: 1.6rem 1rem; font-size: .88rem; }
.notif-empty-ico { font-size: 1.8rem; opacity: .5; margin-bottom: .4rem; }
.notif-pop-foot {
    display: flex; gap: .4rem; padding: .5rem;
    border-top: 1px solid var(--md-outline-variant);
}
.notif-foot-btn {
    flex: 1; background: var(--md-surface-variant); border: none;
    border-radius: 10px; padding: .55rem; cursor: pointer;
    font-size: .8rem; font-weight: 600; color: var(--md-on-surface);
}
.notif-foot-btn:hover { background: var(--md-outline-variant); }
/* Modale "Mostra Tutte" */
.notif-all-list { display: flex; flex-direction: column; gap: .25rem; max-height: 60vh; overflow-y: auto; }
.notif-all-row {
    display: flex; gap: .6rem; align-items: center;
    padding: .65rem .7rem; border-radius: 10px; cursor: pointer;
    background: var(--md-surface);
}
.notif-all-row:hover { background: var(--md-surface-variant); }
.notif-all-txt { flex: 1; font-size: .88rem; display: flex; flex-direction: column; gap: 2px; }
.notif-nonletta { background: var(--md-primary-container, rgba(3,43,48,.07)); }
.notif-nonletta .notif-all-txt { font-weight: 700; }
.notif-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--md-primary); }


/* Soci: pila quota + promemoria (stessa altezza del dropdown anno) */
.soci-quota-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .15rem;
    line-height: 1.5;
}
.chip-promemoria {
    background: var(--md-primary);
    color: #fff;
    border: none;
}
.chip-promemoria:hover { background: var(--md-primary); color: #fff; filter: brightness(1.15); }
.chip-promemoria[disabled] { opacity: .5; cursor: not-allowed; }

/* Matrice campi iscrizione (admin) */
.campi-matrix th, .campi-matrix td { padding: .5rem .4rem; border-bottom: 1px solid var(--md-outline-variant); }
.campi-matrix input[type="checkbox"] { width: 18px; height: 18px; }
.campi-add summary { list-style: none; }
.campi-add summary::-webkit-details-marker { display: none; }

/* ============ VOTI / PREMIAZIONE (tabella stile Excel) ============ */
.modal-wide { max-width: min(960px, 96vw) !important; }
.voti-tbl-wrap { border: 1px solid var(--md-outline-variant); border-radius: 14px; overflow: hidden; background: var(--md-surface); }
.voti-scroll { max-height: 56vh; overflow: auto; }
.voti-tbl { border-collapse: separate; border-spacing: 0; font-size: .85rem; width: 100%; }
.voti-tbl thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--md-primary); color: #fff;
    padding: .45rem .4rem; text-align: center; font-weight: 700; white-space: nowrap;
}
.voti-tbl thead tr:nth-child(2) th { top: 33px; background: var(--md-primary); opacity: .92; font-size: .74rem; font-weight: 600; }
.voti-tbl th.part, .voti-tbl td.part {
    position: sticky; left: 0; z-index: 3; text-align: center; min-width: 46px; font-weight: 700;
}
.voti-tbl th.part { background: var(--md-primary); color: #fff; }
.voti-tbl td.part { background: var(--md-surface-variant); color: var(--md-on-surface); }
.voti-tbl thead tr:nth-child(2) th.part { top: 33px; }
.voti-tbl td { padding: .25rem .3rem; text-align: center; border-bottom: 1px solid var(--md-outline-variant); }
.voti-tbl th.tema-sep, .voti-tbl td.tema-sep { border-left: 2px solid var(--md-outline-variant); }
.voti-tbl td.tot, .voti-tbl th.tot { background: var(--md-surface-variant); font-weight: 700; color: var(--md-primary); }
.voti-tbl td.grand, .voti-tbl th.grand { background: var(--md-surface-variant); font-weight: 800; color: var(--md-primary); border-left: 2px solid var(--md-outline-variant); }
.voto-input {
    width: 3.1rem; padding: .35rem; text-align: center;
    border: 1px solid var(--md-outline-variant); border-radius: 6px; font-size: .85rem;
    -moz-appearance: textfield;
}
.voto-input::-webkit-outer-spin-button, .voto-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============ MODALE VOTAZIONE E PREMIAZIONE (a tab, 90%) ============ */
.modal-vp { max-width: 90vw !important; width: 90vw; height: 90vh; display: flex; flex-direction: column; }
.modal-vp #modalBody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vp-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: .9rem; }
.vp-tab {
    background: transparent; border: none; border-bottom: 2px solid transparent;
    padding: .55rem .8rem; cursor: pointer; font-size: .85rem; font-weight: 600;
    color: var(--md-on-surface-variant); border-radius: 8px 8px 0 0;
}
.vp-tab:hover { background: var(--md-surface-variant); }
.vp-tab.active { color: var(--md-primary); border-bottom-color: var(--md-primary); }
.vp-content { flex: 1; overflow-y: auto; min-height: 0; padding: .2rem .2rem 1rem; }
.vp-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--md-outline-variant);
}
.prem-grid { display: flex; gap: 1rem; align-items: flex-start; }
.prem-grid > .kpi-card { flex: 1; min-width: 0; }


/* ============ REGIA PREMIAZIONE (pannello compatto, mobile) ============ */
.regia-modal { max-width: 420px !important; }
.regia-link { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.regia-link span { flex: 1; font-size: .9rem; font-weight: 600; color: var(--md-on-surface-variant); }
.regia-link .btn-round { text-decoration: none; font-size: 1rem; }
.regia-dots { display: flex; justify-content: center; gap: .35rem; margin: .55rem 0 .1rem; flex-wrap: wrap; }
.regia-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--md-outline-variant); }
.regia-dot.fatto { background: var(--md-primary); opacity: .45; }
.regia-dot.ora { background: var(--md-primary); transform: scale(1.35); }
.regia-main { display: flex; gap: .6rem; margin-top: 1rem; }
.regia-main .regia-main-b { flex: 1; min-height: 64px; font-size: 1.15rem; }
.regia-main .regia-prev-b { flex: 0 0 64px; min-height: 64px; font-size: 1.3rem; padding: 0; }
.regia-b.end-main { background: var(--md-error); color: #fff; }
.regia-finita { flex: 1; text-align: center; font-weight: 700; padding: 1.1rem; border-radius: 14px; background: var(--md-surface-variant); color: var(--md-on-surface-variant); }
.regia-stato { background: var(--md-surface-variant); border-radius: 14px; padding: 1rem; text-align: center; margin-bottom: 1.1rem; }
.regia-fase { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--md-on-surface-variant); }
.regia-cur { font-size: 1.05rem; font-weight: 700; color: var(--md-primary); margin-top: .25rem; }
.regia-voce { font-size: .95rem; color: var(--md-on-surface); margin-top: .35rem; min-height: 1.2em; }
.regia-btns { display: flex; flex-direction: column; gap: .6rem; }
.regia-prevnext { display: flex; gap: .6rem; margin-bottom: .8rem; }
.regia-prevnext .prev { flex: 1; }
.regia-prevnext .next { flex: 2; }
.regia-row2 { display: flex; gap: .6rem; margin-top: .2rem; }
.regia-row2 .regia-b { flex: 1; }
.regia-durata { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--md-on-surface-variant); margin-bottom: 1.1rem; }
.regia-durata input { width: 4rem; padding: .4rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; text-align: center; font-size: .95rem; -moz-appearance: textfield; }
.regia-durata input::-webkit-outer-spin-button, .regia-durata input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.regia-b { padding: .95rem; border: none; border-radius: 14px; font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.regia-b.start { background: var(--md-primary); color: #fff; }
.regia-b.start:disabled { opacity: .45; cursor: not-allowed; }
.regia-b.prev { background: var(--md-surface-variant); color: var(--md-on-surface); font-size: .95rem; }
.regia-b.prev:disabled { opacity: .45; cursor: not-allowed; }
.regia-b.next { background: #0a7d52; color: #fff; }
.regia-b.next:disabled { opacity: .45; cursor: not-allowed; }
.regia-b.reset { background: var(--md-surface-variant); color: var(--md-on-surface); font-size: .95rem; }
.regia-b.end { background: var(--md-surface); border: 1.5px solid #e0b4b0; color: var(--md-error); font-size: .95rem; }

/* ============ ATTESTATI (editor) ============ */
.attestati-modal { max-width: min(880px, 96vw) !important; }
.att-editor { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.att-preview-wrap { flex: 0 0 auto; }
.att-preview {
    position: relative; background-size: cover; background-position: center;
    border: 1px solid var(--md-outline-variant); border-radius: 6px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.15); touch-action: none;
}
.att-hint { font-size: .76rem; color: var(--md-on-surface-variant); margin-top: .4rem; max-width: 330px; }
.att-field {
    position: absolute; transform: translate(-50%, -50%);
    white-space: nowrap; cursor: grab; padding: 2px 4px; line-height: 1.1;
    border: 1px dashed transparent; border-radius: 4px; user-select: none;
}
.att-field.sel { border-color: var(--md-primary); background: rgba(3,43,48,.06); }
.att-field:active { cursor: grabbing; }
.att-panel { flex: 1; min-width: 230px; display: flex; flex-direction: column; gap: .6rem; }
.att-prop { display: flex; flex-direction: column; gap: .25rem; }
.att-prop > label { font-size: .78rem; font-weight: 600; color: var(--md-on-surface-variant); }
.att-prop select, .att-prop input[type=text], .att-prop input[type=number] {
    padding: .45rem .55rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-size: .9rem; background: var(--md-surface);
}
.att-prop input[type=color] { width: 100%; height: 38px; border: 1px solid var(--md-outline-variant); border-radius: 8px; padding: 2px; background: var(--md-surface); }
.att-style > div { display: flex; gap: .4rem; }
.att-tog {
    flex: 1; padding: .5rem; border: 1px solid var(--md-outline-variant); border-radius: 8px;
    background: var(--md-surface); cursor: pointer; font-size: 1rem; color: var(--md-on-surface);
}
.att-tog.on { background: var(--md-primary); color: #fff; border-color: var(--md-primary); }
.att-tog.danger { color: var(--md-error); flex: 0 0 auto; width: 42px; }


/* Fuori programma (editor premiazione) */
.fp-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.fp-row .fp-id { width: 4.5rem; }
.fp-row .fp-nome { flex: 1; min-width: 0; }
.fp-row .fp-pos { width: 4rem; }
.fp-row input { padding: .4rem .5rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-size: .85rem; }
.fp-modal-overlay {
    position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.fp-modal-card {
    background: var(--md-surface); border-radius: 18px; padding: 1.2rem 1.4rem;
    width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
    box-shadow: 0 12px 50px rgba(0,0,0,.35);
}

/* Toggle segmentati Host/Cloudinary (impostazioni storage per servizio) */
.storage-row { display:flex; align-items:center; justify-content:flex-start; gap:.8rem; padding:.55rem 0; flex-wrap:wrap; }
.storage-row-cartella .storage-svc { flex:0 0 auto; min-width:170px; }
.storage-cartella-inp { flex:1; min-width:150px; padding:.45rem .6rem; border:1px solid var(--md-outline-variant); border-radius:8px; font-size:.9rem; background:var(--md-surface); color:var(--md-on-surface); }
.storage-row + .storage-row { border-top:1px solid var(--md-outline-variant); }
.storage-svc { font-weight:600; font-size:.92rem; }
.seg { display:inline-flex; border:1px solid var(--md-outline); border-radius:999px; overflow:hidden; flex-shrink:0; }
.seg-btn { border:none; background:transparent; padding:.35rem .9rem; font-size:.82rem; cursor:pointer; color:var(--md-on-surface-variant); }
.seg-btn.on { background:var(--md-primary); color:#fff; font-weight:600; }

/* === Impostazioni a tab (stile "linguette" come la newsletter) === */


.imp-save-btn { margin-left: auto; width: auto; flex-shrink: 0; }





/* Corpo connesso alle linguette (come le schede del browser) */

/* Dentro il pannello le card diventano piatte: il riquadro è il body stesso */


.imp-panel { display: none; }
.imp-panel.on { display: block; animation: impFade .18s ease; }
@keyframes impFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.imp-save-bar {
    position: sticky; bottom: 0; text-align: right;
    padding: .75rem 0; margin-top: .25rem;
    background: linear-gradient(to top, var(--md-surface) 60%, transparent);
}


/* ===== Galleria — moderazione admin ===== */
.gal-mod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
/* Striscia orizzontale: tutte le foto del socio su una riga, scroll laterale */
.gal-mod-titlerow { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.gal-mod-toggle { display:flex; gap:1.4rem; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin-top:.7rem; }
.gal-mod-toggle .ui-switch { gap:.5rem; }
.gal-mod-badge { font-size:.7rem; font-weight:700; padding:.12rem .55rem; border-radius:100px; background:var(--md-surface-variant); color:var(--md-on-surface-variant); }
.gal-mod-badge.on { background:#1e9e5a; color:#fff; }
.gal-mod-strip { display:flex; gap:.7rem; overflow-x:auto; padding:.2rem .1rem .7rem; scrollbar-width:thin; }
.gal-mod-strip .gal-mod-cell { flex:0 0 150px; width:150px; }
.gal-mod-strip::-webkit-scrollbar { height:8px; }
.gal-mod-strip::-webkit-scrollbar-thumb { background:var(--md-outline); border-radius:10px; }
.gal-mod-strip::-webkit-scrollbar-track { background:var(--md-surface-variant); border-radius:10px; }
.gal-bio-preview { }
/* Cella moderazione: frame rettangolare, foto piena, pillola azioni in basso (lo spazio sopra la pillola è ~quadrato) */
.gal-mod-cell { position:relative; background:#000; border-radius:14px; overflow:hidden; aspect-ratio:1 / 1.16; cursor:pointer; }
.gal-mod-cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gal-badge { position:absolute; left:6px; top:6px; font-size:.68rem; font-weight:700; padding:.18rem .45rem; border-radius:8px; color:#fff; z-index:2; }
.gal-wait { background:rgba(180,120,0,.92); }
.gal-rej { background:rgba(179,38,30,.92); }
.gal-ok { background:rgba(10,125,82,.92); }
.gal-mod-pill { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:.35rem; background:var(--gal-pill-bg, #ffffff); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); box-shadow:0 1px 6px rgba(0,0,0,.3); border-radius:999px; padding:.22rem .35rem; z-index:2; }
.gal-mod-pill .btn-icon { background:transparent; color:var(--gal-pill-fg, #1f1f1f); border:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; }
.gal-mod-pill .btn-icon:hover { background:rgba(127,127,127,.25); }
.gal-ic { width:18px; height:18px; display:block; }
.gal-lb-btn .gal-ic { width:18px; height:18px; flex:0 0 auto; }
/* Lightbox foto ingrandita */
.gal-lightbox { position:fixed; inset:0; z-index:12000; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.gal-lb-inner { max-width:min(92vw,900px); max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.gal-lb-inner img, .gal-lb-img { max-width:100%; max-height:72vh; object-fit:contain; border-radius:10px; background:#111; display:block; }
.gal-lb-imgwrap { width:100%; display:flex; justify-content:center; overflow:hidden; touch-action:pan-y; }
.gal-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.gal-lb-nav:hover { background:rgba(255,255,255,.3); }
.gal-lb-prev { left:14px; }
.gal-lb-next { right:14px; }
.gal-lb-tit { color:#eee; font-size:.95rem; }
.gal-lb-close { position:absolute; top:14px; right:16px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:1.2rem; cursor:pointer; }
.gal-lb-close:hover { background:rgba(255,255,255,.3); }
.gal-lb-actions { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.gal-lb-btn { border:none; border-radius:999px; padding:.6rem 1.1rem; font-size:.92rem; font-weight:600; cursor:pointer; background:#fff; color:#111; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.gal-lb-btn.danger { background:#c0392b; color:#fff; }
.gal-lb-btn:hover { opacity:.9; }
.gal-mod-socio { font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== Galleria moderazione: cartelle per socio ===== */
.gal-socio-group { margin-bottom: 1.4rem; }
.gal-socio-group:last-child { margin-bottom: 0; }
.gal-socio-head {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: .95rem;
    padding: .4rem .2rem .5rem;
    border-bottom: 1px solid var(--md-outline-variant);
    margin-bottom: .8rem;
}
.gal-socio-count {
    background: var(--md-surface-variant); color: var(--md-on-surface-variant);
    border-radius: 100px; font-size: .72rem; font-weight: 700;
    padding: .1rem .5rem; min-width: 1.4rem; text-align: center;
}

/* Stella copertina galleria */
.gal-cover.on { color: #f5a623; }

/* ============================== APPUNTI (board memo) ============================== */
.app-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; margin-top: 1rem; }
.app-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--md-on-surface-variant); }
.app-card {
    position: relative; background: #fffdf0; border: 1px solid #efe6b8; border-radius: 14px;
    padding: 1.4rem 1rem 1rem; min-height: 175px; cursor: pointer; color: #2a2a2a;
    box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s;
    display: flex; flex-direction: column; overflow: hidden;
}
.app-card:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.app-card .app-pin { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 1.3rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.app-card .app-lock { position: absolute; top: 8px; right: 10px; font-size: .85rem; opacity: .7; }
.app-done {
    position: absolute; top: 8px; left: 10px; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #c9b75a; background: rgba(255,255,255,.6); cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: .8rem; line-height: 1; z-index: 2;
}
.app-done:hover { background: #fff; }
.app-card-title { font-weight: 800; font-size: 1.02rem; margin: .3rem 0 .5rem; line-height: 1.25; word-break: break-word; }
.app-card-thumb { margin: 0 -.3rem .5rem; }
.app-card-thumb img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.app-card-prev { font-size: .86rem; line-height: 1.45; color: #5c5640; overflow: hidden; flex: 1; }
.app-card.done { background: #f4f1e2; }
.app-card.done .app-card-title { text-decoration: line-through; opacity: .6; }
.app-card.done .app-done { background: #c9b75a; border-color: #c9b75a; }

/* Editor (memo ingrandito) */
.app-editor-overlay {
    position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.app-editor {
    position: relative; width: min(640px, 100%); max-height: 92vh; overflow-y: auto;
    background: #fffdf0; border: 1px solid #efe6b8; border-radius: 18px;
    padding: 2.2rem 1.3rem 1.2rem; color: #2a2a2a; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.app-ed-done {
    position: absolute; top: 12px; left: 14px; width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid #c9b75a; background: rgba(255,255,255,.7); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
}
.app-ed-done.on { background: #c9b75a; border-color: #c9b75a; }
.app-ed-close {
    position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.08); cursor: pointer; font-size: 1rem; line-height: 1; color: #444;
}
.app-ed-close:hover { background: rgba(0,0,0,.18); }
.app-ed-titlerow { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 .7rem; }
.app-ed-title {
    flex: 1; min-width: 0; font-size: 1.2rem; font-weight: 800; border: none; background: transparent;
    border-bottom: 2px solid #e6dca0; padding: .3rem .1rem; color: #2a2a2a;
}
.app-ed-title:focus { outline: none; border-bottom-color: #c9b75a; }
.app-ed-imgbtn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e6dca0; background: #fff; cursor: pointer; font-size: 1.05rem; }
.app-ed-imgbtn:hover { background: #fff8d8; }
.app-ed-text {
    width: 100%; min-height: 160px; resize: vertical; border: 1px solid #e6dca0; border-radius: 10px;
    background: rgba(255,255,255,.55); padding: .7rem; font-size: .98rem; line-height: 1.55; color: #2a2a2a; font-family: inherit;
}
.app-ed-text:focus { outline: none; border-color: #c9b75a; background: #fff; }
.app-ed-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; margin-top: .7rem; }
.app-ed-img { position: relative; }
.app-ed-img img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.app-ed-imgdel { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .75rem; line-height: 1; }
.app-ed-priv { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .9rem; color: #5c5640; cursor: pointer; }
.app-ed-share { display: flex; gap: .5rem; margin-top: .9rem; }
.app-ed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid #ece2a8; }
.app-ed-del { border: none; background: #c0392b; color: #fff; cursor: pointer; font-size: .85rem; font-weight: 600; padding: .5rem .95rem; border-radius: 999px; line-height: 1; }
.app-ed-del:hover { background: #a93226; }
.app-ed-save { width: auto; margin-left: auto; }
.app-ed-progress { margin-top: .6rem; font-size: .85rem; color: var(--md-primary); text-align: center; }


/* Appunti — editor a testo ricco con immagini in linea (stile OneNote) */
.app-ed-toolbar { display: flex; align-items: center; gap: .35rem; margin: .2rem 0 .55rem; flex-wrap: wrap; }
.app-tb { border: 1px solid #e6dca0; background: #fff; border-radius: 8px; min-width: 34px; height: 34px; padding: 0 .55rem; cursor: pointer; font-size: .95rem; color: #2a2a2a; }
.app-tb:hover { background: #fff8d8; }
.app-tb-img { font-size: .82rem; font-weight: 600; }
.app-tb-sep { width: 1px; height: 22px; background: #e6dca0; margin: 0 .25rem; }
.app-ed-text[contenteditable] { overflow: auto; cursor: text; }
.app-ed-text[contenteditable]:focus { outline: none; border-color: #c9b75a; background: #fff; }
.app-ed-text:empty:before { content: attr(data-ph); color: #9a937a; pointer-events: none; }
.app-ed-text .app-iw { position: relative; display: inline-block; vertical-align: top; line-height: 0; max-width: 100%; }
.app-ed-text .app-iw img { width: 100%; height: auto; display: block; border-radius: 8px; }
.app-ed-text .app-iw.sel { outline: 2px solid #1565c0; outline-offset: 2px; }
.app-iw-tools { position: absolute; top: 5px; left: 5px; display: none; gap: 3px; line-height: 1; z-index: 3; }
.app-ed-text .app-iw.sel .app-iw-tools, .app-ed-text .app-iw:hover .app-iw-tools { display: flex; }
.app-iw-tools button { border: none; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; line-height: 1; padding: 0; }
.app-iw-tools button:hover { background: rgba(0,0,0,.85); }
.app-iw-h { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; background: #fff; border: 2px solid #1565c0; border-radius: 50%; cursor: nwse-resize; display: none; z-index: 3; touch-action: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.app-ed-text .app-iw.sel .app-iw-h, .app-ed-text .app-iw:hover .app-iw-h { display: block; }

/* Bento sola-lettura visite pixel (tab Tracciamento) */
.px-stats-box { margin-top: .2rem; }
.px-periodo { font-size: .82rem; color: var(--md-on-surface-variant); margin-bottom: .5rem; }
.px-home-row td { font-weight: 700; }

/* Filtri storico visite pixel */
.px-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .6rem; }
.px-seg { display: inline-flex; border: 1px solid var(--md-outline-variant); border-radius: 999px; overflow: hidden; }
.px-seg button { border: none; background: transparent; padding: .3rem .8rem; font-size: .82rem; cursor: pointer; color: var(--md-on-surface-variant); }
.px-seg button.active { background: var(--md-primary-container); color: var(--md-primary); font-weight: 600; }

/* ===== Pagina Documenti ===== */
.doc-toolbar { display: flex; align-items: center; gap: .8rem; margin: .3rem 0 1rem; flex-wrap: wrap; }
.doc-search { flex: 1 1 260px; max-width: 420px; padding: .55rem .8rem; border: 1px solid var(--md-outline-variant); border-radius: 999px; font-size: .95rem; background: var(--md-surface); color: var(--md-on-surface); }
.doc-size { font-size: .8rem; color: var(--md-on-surface-variant); white-space: nowrap; }
.doc-lista { display: flex; flex-direction: column; gap: .4rem; }
.doc-row { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: 12px; }
.doc-row-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.doc-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-row-meta { font-size: .78rem; color: var(--md-on-surface-variant); margin-top: .1rem; }
.doc-row-actions { display: flex; gap: .1rem; flex: 0 0 auto; }
.doc-modal-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.doc-preview { border: 1px solid var(--md-outline-variant); border-radius: 10px; overflow: hidden; background: var(--md-surface-variant); }
.doc-preview-frame { width: 100%; height: 65vh; border: 0; display: block; background: #fff; }
.doc-preview-pdf { max-height: 72vh; overflow: auto; background: var(--md-surface-variant); padding: .6rem; text-align: center; }
.doc-pdf-page { display: block; max-width: 100%; height: auto; margin: 0 auto .6rem; box-shadow: 0 1px 5px rgba(0,0,0,.18); background: #fff; border-radius: 2px; }
.doc-pdf-page:last-child { margin-bottom: 0; }
.doc-preview-imgwrap { display: flex; justify-content: center; padding: 1rem; }
.doc-preview-imgwrap img { max-width: 100%; max-height: 65vh; border-radius: 6px; }
.doc-preview-none { padding: 2rem 1rem; text-align: center; color: var(--md-on-surface-variant); }
.doc-rename-btn { background: none; border: none; cursor: pointer; font-size: 1rem; margin-left: .5rem; opacity: .7; }
.doc-rename-btn:hover { opacity: 1; }
.doc-rename-inp { font-size: 1rem; padding: .25rem .5rem; border: 1px solid var(--md-outline-variant); border-radius: 6px; }

/* Lucchetto documenti: spento (scuro/semitrasparente) → acceso (colorato) */
.doc-lock { opacity: .3; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.doc-lock:hover { opacity: .6; }
.doc-lock.locked { opacity: 1; filter: none; }

/* ===== Sondaggi (admin) ===== */
.sv-adm-row { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: 12px; margin-bottom: .5rem; }
.sv-adm-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.sv-adm-title { font-weight: 600; }
.sv-adm-meta { font-size: .8rem; color: var(--md-on-surface-variant); margin-top: .15rem; }
.sv-adm-actions { display: flex; gap: .15rem; flex: 0 0 auto; flex-wrap: wrap; }
.sv-badge { font-size: .68rem; padding: .12rem .5rem; border-radius: 999px; vertical-align: middle; font-weight: 600; }
.sv-badge.aperto { background: var(--md-primary-container); color: var(--md-on-primary-container, #084); }
.sv-badge.chiuso { background: var(--md-error-container); color: var(--md-error); }
.sv-idgrid { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; }
.sv-idck { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.sv-idck input { width: 18px; height: 18px; }
/* Costruttore domande */
.sv-qrow { border: 1px solid var(--md-outline-variant); border-radius: 12px; padding: .8rem; margin-bottom: .7rem; background: var(--md-surface); }
.sv-qrow-top { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.sv-q-testo { flex: 1 1 220px; padding: .5rem .7rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-family: inherit; font-size: .95rem; background: var(--md-surface); color: inherit; }
.sv-q-tipo { padding: .5rem .6rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-family: inherit; background: var(--md-surface); color: inherit; }
.sv-q-opts { margin: .6rem 0 .3rem; padding-left: .2rem; }
.sv-opt-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.sv-opt-inp { flex: 1 1 auto; padding: .4rem .6rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-family: inherit; background: var(--md-surface); color: inherit; }
.sv-q-obb { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--md-on-surface-variant); margin-top: .3rem; cursor: pointer; }
.sv-q-obb input { width: 18px; height: 18px; }
/* Risultati */
.sv-bars { display: flex; flex-direction: column; gap: .5rem; }
.sv-bar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: .6rem; align-items: center; }
.sv-bar-lab { font-size: .9rem; word-break: break-word; }
.sv-bar-track { background: var(--md-surface-variant); border-radius: 999px; height: 12px; overflow: hidden; }
.sv-bar-fill { background: var(--md-primary); height: 100%; border-radius: 999px; }
.sv-bar-n { font-size: .82rem; color: var(--md-on-surface-variant); white-space: nowrap; }
.sv-open-list { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.sv-none { color: var(--md-on-surface-variant); font-size: .88rem; }

/* ===== Sondaggi: modalità quiz (admin) ===== */
.sv-quiz-tgl { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; cursor: pointer; }
.sv-quiz-tgl input { width: 18px; height: 18px; }
.sv-quiz-hint { font-size: .82rem; color: var(--md-on-surface-variant); margin: 0 0 .6rem; }
.sv-timer-box { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.sv-timer-inp { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--md-on-surface-variant); }
.sv-timer-inp input { width: 84px; padding: .35rem .5rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; background: var(--md-surface); color: var(--md-on-surface); }
/* Marcatore "risposta corretta": nascosto se non in modalità quiz */
.sv-opt-corr { display: none; color: var(--md-on-surface-variant); }
#svDomande.quiz-on .sv-opt-corr { display: inline-flex; }
.sv-opt-row.is-correct .sv-opt-corr { background: #108a60; color: #fff; border-color: #108a60; }
.sv-opt-row.is-correct .sv-opt-inp { border-color: #108a60; box-shadow: 0 0 0 1px #108a60 inset; }
/* Barre risultati: opzione corretta */
.sv-bar.is-correct .sv-bar-lab { color: #108a60; font-weight: 600; }
.sv-bar.is-correct .sv-bar-fill { background: #108a60; }
/* Risposte ricevute */
.sv-ans-row { display: flex; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--md-outline-variant); }
.sv-ans-row:first-of-type { border-top: none; }
.sv-ans-ok, .sv-ans-ko { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; }
.sv-ans-ok { background: #108a60; }
.sv-ans-ko { background: #c0261a; }
.sv-ans-body { flex: 1 1 auto; min-width: 0; }
.sv-ans-q { font-weight: 600; font-size: .9rem; }
.sv-ans-v { color: var(--md-on-surface-variant); font-size: .9rem; }
.sv-ans-sol { font-size: .82rem; margin-top: .1rem; }

/* Checkbox custom per il modulo Sondaggi (niente "molla"/zoom nativo, dimensione fissa) */
.sv-idck input[type="checkbox"],
.sv-q-obb input[type="checkbox"],
.sv-quiz-tgl input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: 0;
    border: 2px solid var(--md-outline-variant);
    border-radius: 5px;
    background: var(--md-surface);
    display: inline-grid; place-content: center;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.sv-idck input[type="checkbox"]::before,
.sv-q-obb input[type="checkbox"]::before,
.sv-quiz-tgl input[type="checkbox"]::before {
    content: "";
    width: 10px; height: 10px;
    transform: scale(0);
    transition: transform .12s ease;
    background: var(--md-primary);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.sv-idck input[type="checkbox"]:checked,
.sv-q-obb input[type="checkbox"]:checked,
.sv-quiz-tgl input[type="checkbox"]:checked {
    border-color: var(--md-primary); background: var(--md-surface);
}
.sv-idck input[type="checkbox"]:checked::before,
.sv-q-obb input[type="checkbox"]:checked::before,
.sv-quiz-tgl input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* ===== Sondaggi: layout Risultati ===== */
.sv-res-top { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.sv-tot-card { flex: 0 0 auto; min-width: 150px; text-align: center; }
.sv-collapse { flex: 1 1 260px; background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: var(--radius-lg); padding: .3rem .9rem; }
.sv-collapse summary { cursor: pointer; font-weight: 600; padding: .55rem 0; list-style: none; }
.sv-collapse summary::-webkit-details-marker { display: none; }
.sv-collapse summary::before { content: '▸'; display: inline-block; margin-right: .5rem; transition: transform .15s; }
.sv-collapse[open] summary::before { transform: rotate(90deg); }
.sv-collapse[open] summary { border-bottom: 1px solid var(--md-outline-variant); margin-bottom: .5rem; }
.sv-res-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
@media (min-width: 900px) { .sv-res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1500px) { .sv-res-grid { grid-template-columns: repeat(3, 1fr); } }
.sv-res-grid .kpi-card { margin: 0; height: 100%; }
/* Dettagli risposte: colonne 2:1 (risposte : utenti) */
.sv-det-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
.sv-det-grid.no-side { grid-template-columns: 1fr; }
@media (max-width: 900px) { .sv-det-grid { grid-template-columns: 1fr; } }
.sv-det-main { min-width: 0; }
.sv-det-side { min-width: 0; }
.sv-det-side .sv-users { position: sticky; top: 1rem; }
.sv-user { padding: .5rem 0; border-top: 1px solid var(--md-outline-variant); }
.sv-user:first-of-type { border-top: none; }
.sv-user-nome { font-weight: 600; }
.sv-user-c { font-size: .82rem; color: var(--md-on-surface-variant); word-break: break-word; }

/* Dettagli risposte — legenda domande + tabella domande×utenti */
.sv-leg-item { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--md-outline-variant); font-size: .9rem; }
.sv-leg-item:first-of-type { border-top: none; }
.sv-leg-n { flex: 0 0 auto; font-weight: 700; color: var(--md-primary); min-width: 2.2rem; }
.sv-leg-q { flex: 1 1 auto; min-width: 0; }
.sv-leg-sol { flex: 0 0 auto; color: #137333; font-weight: 600; font-size: .82rem; }
.sv-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sv-answers-table { border-collapse: collapse; width: 100%; font-size: .82rem; }
.sv-answers-table th, .sv-answers-table td { border: 1px solid var(--md-outline-variant); padding: .4rem .55rem; text-align: left; vertical-align: top; }
.sv-answers-table thead th { background: var(--md-surface-variant); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.sv-answers-table td.sv-td-user, .sv-answers-table th.sv-th-user { background: var(--md-surface-variant); font-weight: 600; white-space: nowrap; position: sticky; left: 0; z-index: 1; }
.sv-answers-table thead th.sv-th-user { z-index: 2; }
.sv-answers-table td.sv-c-ok { background: rgba(19, 115, 51, .10); }
.sv-answers-table td.sv-c-ko { background: rgba(211, 47, 47, .10); }

/* Selettore destinatari nel builder newsletter */
.nl-dest-row { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .7rem; flex-wrap: wrap; }
.nl-dest-lbl { font-weight: 700; font-size: .85rem; }
.nl-dest-select { padding: .4rem .6rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; background: var(--md-surface); color: var(--md-on-surface); font: inherit; }

/* Validazione QR — scanner accessi */
.qr-scan-box { position: relative; width: 260px; max-width: 80vw; aspect-ratio: 1; margin: 0.5rem auto; border-radius: 16px; overflow: hidden; background: #000; }
.qr-scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-scan-frame { position: absolute; inset: 12%; border: 3px solid rgba(255,255,255,0.9); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.15); pointer-events: none; }
.sc-evt { font-weight: 700; margin-bottom: 0.8rem; }
.sc-field { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--md-outline-variant); }
.sc-field:first-of-type { border-top: none; }
.sc-field > span { color: var(--md-on-surface-variant); }

/* Pulsante scansione + esito scheda utente */
.scanner-card { text-align: center; }
.btn-scan { display: inline-flex; align-items: center; gap: .5rem; justify-content: center; background: #ff6f61; color: #fff; border: none; border-radius: 14px; padding: .9rem 1.4rem; font-size: 1rem; font-weight: 600; cursor: pointer; }
.btn-scan:hover { background: #ff5a4d; }
.sc-status { text-align: center; font-size: 1.35rem; font-weight: 700; margin: 1rem 0 .3rem; }
.sc-ok { color: #1f7a1f; }
.sc-ko { color: var(--md-error); }
/* KPI controllo accessi */
.acc-kpis { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.acc-kpi { flex: 1 1 0; min-width: 80px; background: var(--md-surface-variant); border-radius: 12px; padding: .7rem; text-align: center; }
.acc-kpi .acc-n { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.acc-kpi .acc-l { font-size: .8rem; color: var(--md-on-surface-variant); margin-top: .2rem; }
.acc-in { background: rgba(31,122,31,.12); }
.acc-miss { background: rgba(178,106,0,.12); }
.acc-rev { background: rgba(211,47,47,.12); }

/* Editor sondaggio: righe con campi affiancati (responsive) */
.sv-editrow { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.sv-editrow > .field { flex: 1 1 200px; min-width: 0; }
.sv-editrow > .sv-col-2 { flex: 2 1 260px; }
.sv-editrow > .sv-col-1 { flex: 1 1 190px; }
.sv-conf-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sv-conf-sel { flex: 1 1 220px; min-width: 0; }
.sv-conf-sel select { width: 100%; }

/* Editor sondaggio: riga Titolo + Data + Banner */
.sv-row-top { align-items: flex-end; }
.sv-row-top .sv-col-grow { flex: 1 1 220px; }
.sv-row-top .sv-col-date { flex: 0 0 auto; }
.sv-row-top .sv-col-date input { width: auto; min-width: 150px; }
.sv-row-top .sv-col-banner { flex: 0 0 auto; }
.sv-banner-btn { width: 68px; height: 68px; border: 1px dashed var(--md-outline); border-radius: 12px; background: var(--md-surface); color: var(--md-on-surface-variant); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .6rem; line-height: 1.05; text-align: center; padding: 4px; background-size: cover; background-position: center; }
.sv-banner-btn:hover { border-color: var(--md-primary); }
.sv-banner-btn.has-img { border-style: solid; color: #fff; }
.sv-banner-chk { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(31,122,31,.9); color: #fff; font-size: 1rem; }

/* ============================================================
   DESIGN SYSTEM — Pulsanti azione rotondi (aggiorna / stampa)
   Unico stile per tutto il gestionale. Usare gli helper JS
   btnRefreshHtml() / btnPrintHtml() invece di riscrivere l'SVG.
   ============================================================ */
.btn-round {
    width: 38px; height: 38px; flex: 0 0 auto; padding: 0;
    border-radius: 50%; border: 1px solid var(--md-outline-variant);
    background: var(--md-surface); color: var(--md-on-surface);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.btn-round:hover:not(:disabled) { background: var(--md-surface-variant); }
.btn-round:active:not(:disabled) { transform: scale(.94); }
.btn-round:disabled { opacity: .55; cursor: default; }
.btn-round svg { width: 18px; height: 18px; }
/* Feedback di caricamento: l'icona ruota mentre i dati si aggiornano */
.btn-round.is-busy svg { animation: btnRoundSpin .8s linear infinite; }
@keyframes btnRoundSpin { to { transform: rotate(360deg); } }
/* Retrocompatibilità: le vecchie classi ereditano lo stesso stile */
.btn-copy-round, .btn-print-round { width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border-radius: 50%; border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-copy-round:hover, .btn-print-round:hover { background: var(--md-surface-variant); }
.btn-copy-round svg, .btn-print-round svg { width: 18px; height: 18px; }

/* ===== Editor sondaggio: bento + selettore modalità ===== */
.sv-bento-h { margin: 0 0 .8rem; font-size: 1.05rem; }
.sv-bento .sv-hint { font-size: .8rem; color: var(--md-on-surface-variant); margin: .4rem 0 0; }
.sv-modgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.sv-mod { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border: 1px solid var(--md-outline-variant); border-radius: 14px; cursor: pointer; background: var(--md-surface); transition: border-color .15s ease, background .15s ease; }
.sv-mod:hover { background: var(--md-surface-variant); }
.sv-mod input { position: absolute; opacity: 0; pointer-events: none; }
.sv-mod-ic { font-size: 1.4rem; line-height: 1; }
.sv-mod-lab { font-weight: 600; font-size: .92rem; }
.sv-mod-desc { font-size: .75rem; color: var(--md-on-surface-variant); line-height: 1.3; }
.sv-mod.is-on { border-color: var(--md-primary); border-width: 2px; padding: calc(.8rem - 1px) calc(.9rem - 1px); background: var(--md-primary-container, var(--md-surface-variant)); }
/* Righe opzione: una per riga, elementi allineati */
.sv-optrow { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid var(--md-outline-variant); }
.sv-optrow[hidden] { display: none; }

/* Scanner: due modalità, contatore e suono */
.sc-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.btn-scan-alt { background: var(--md-surface); color: var(--md-on-surface); border: 1px solid var(--md-outline-variant); }
.btn-scan-alt:hover { background: var(--md-surface-variant); }
.sc-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--md-outline-variant); font-size: .88rem; }
.sc-count b { font-size: 1.1rem; }

/* Scanner: check-in manuale per chi non ha il QR */
.sc-manual { margin-top: .9rem; text-align: left; }
.sc-manual .doc-search { width: 100%; max-width: none; }
.sc-ris { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.sc-ris-item { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; padding: .55rem .8rem; border: 1px solid var(--md-outline-variant); border-radius: 10px; background: var(--md-surface); color: var(--md-on-surface); cursor: pointer; text-align: left; }
.sc-ris-item:hover { background: var(--md-surface-variant); }
.sc-ris-item small { color: var(--md-on-surface-variant); font-size: .8rem; }

/* Attività: barra strumenti con ricerca a sinistra e "+" a destra */
.att-toolbar { display: flex; align-items: center; gap: .6rem; }
.att-toolbar .doc-search { flex: 1 1 auto; }
.att-toolbar .btn-add { margin-left: auto; flex-shrink: 0; }

/* Scanner: coda convalide offline */
.sc-offline { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; padding: .6rem .8rem; border-radius: 12px; background: rgba(178,106,0,.12); font-size: .88rem; }

/* Barra pulizia notifiche */
.notif-clean { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: 0 0 .7rem; margin-bottom: .5rem; border-bottom: 1px solid var(--md-outline-variant); font-size: .85rem; }
.notif-clean > span { color: var(--md-on-surface-variant); margin-right: .2rem; }
.notif-clean button { padding: .3rem .6rem; font-size: .8rem; }

/* Pulsante Regia Live: badge cliccabile, in evidenza tra le azioni */
.btn-regia {
    display: inline-flex; align-items: center; gap: .35rem; order: -1;
    padding: .45rem .85rem; border: none; border-radius: 999px;
    background: #ff6f61; color: #fff; font-size: .85rem; font-weight: 700;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255,111,97,.35);
}
.btn-regia:hover { background: #ff5a4d; }
.btn-regia:active { transform: scale(.96); }

/* Regia live: elementi dentro il cockpit e le bento */
.regia-stat { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .88rem; }
.regia-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.regia-cl-row { display: grid; grid-template-columns: 42px 1fr auto auto; gap: .6rem; align-items: center; padding: .5rem .6rem; border-bottom: 1px solid var(--md-outline-variant); }
.regia-cl-row:last-child { border-bottom: none; }
.regia-cl-top { background: rgba(255,204,128,.18); border-radius: 10px; font-weight: 700; }
.regia-cl-pos { text-align: center; }
.regia-cl-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regia-cl-t { font-size: .85rem; color: var(--md-on-surface-variant); min-width: 58px; text-align: right; }
.regia-dom { padding: .55rem .2rem; border-bottom: 1px solid var(--md-outline-variant); }
.regia-dom:last-child { border-bottom: none; }
.regia-dom-q { font-size: .92rem; line-height: 1.4; }
.regia-dom-sol { font-size: .82rem; color: #1f7a1f; margin-top: .2rem; }
.regia-dom-nosol { color: #b26a00; }
.cockpit-cd-time { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.cockpit-cd-lbl { font-size: .8rem; opacity: .8; margin-top: .2rem; }
.cockpit-cd-none { font-size: 2rem; opacity: .5; }

/* Regia: pulsanti colorati per stato (attivo = azione possibile ora) */
.cockpit-player-btn.rgb-go   { background: rgba(31,122,31,.92); color: #fff; }
.cockpit-player-btn.rgb-stop { background: rgba(211,47,47,.92); color: #fff; }
.cockpit-player-btn.rgb-win  { background: rgba(214,158,0,.95); color: #fff; }
.cockpit-player-btn.rgb-neutro { background: rgba(255,255,255,.18); color: #fff; }
.cockpit-player-btn.rgb-off {
    background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.45) !important;
    cursor: default; box-shadow: none;
}
.cockpit-player-btn:not(.rgb-off):hover { filter: brightness(1.1); }
.cockpit-player-btn:not(.rgb-off):active { transform: scale(.96); }

/* Editor sondaggio: campi data/ora stretti e opzioni non disponibili in grigio */
.sv-row-top .sv-col-data { flex: 0 0 auto; }
.sv-row-top .sv-col-ora { flex: 0 0 auto; }
.sv-row-top .sv-col-ora input { width: 8.2rem; min-width: 0; }   /* spazio anche per l'icona orologio */
.sv-row-top .sv-col-data input { width: 10.5rem; }
.sv-opt-off { opacity: .45; pointer-events: none; filter: grayscale(1); }
.sv-opt-off label, .sv-opt-off input, .sv-opt-off select, .sv-opt-off button { cursor: default !important; }

/* Anteprima sondaggio in modale */
.sv-prev-tabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.sv-prev-t { padding: .35rem .7rem; font-size: .82rem; }
.sv-prev-t.is-on { background: var(--md-primary); color: #fff; border-color: transparent; }
.sv-prev-box { display: flex; justify-content: center; background: #f0f0f3; border-radius: 12px; padding: .6rem; overflow: hidden; position: relative; }
.sv-prev-frame { border: 0; background: #fff; border-radius: 10px; height: 220px; transition: width .2s ease, height .2s ease; }
.sv-prev-frame.mobile { width: 390px; max-width: 100%; }
/* Anteprima "Computer": il riquadro va disegnato a 1100px (oltre la soglia delle
   due colonne, 900px) e ridotto in scala dal JS. La regola deve valere SEMPRE,
   anche quando il gestionale è usato da telefono: se restasse solo in desktop.css
   (dentro @media min-width:721px) l'anteprima PC apparirebbe identica a quella
   mobile, solo un po' più larga. */
.sv-prev-frame.desktop {
    width: 1100px;
    max-width: none;
    transform-origin: top left;
    transition: none;   /* la transizione falsava la misura della scala */
    /* Fuori dal flusso: la scala CSS non riduce lo spazio occupato, quindi da
       in-flow il frame "spingeva" a 1100px e il riquadro veniva tagliato.
       In assoluto occupa solo l'area realmente visibile. */
    position: absolute;
    top: .6rem;
    left: 50%;                 /* centratura senza calcoli JS: */
    transform-origin: top center;   /* si scala attorno al centro */
}

/* Impostazioni: nome + articolo sulla stessa riga */
.set-row-nome { display: flex; gap: .6rem; align-items: flex-end; }
.set-col-art { flex: 0 0 auto; }
.set-col-art select { width: 5.2rem; }

/* Editor: immagine della domanda */
.sv-q-img.has-img, .btn-icon.sv-q-img.has-img { background: rgba(31,122,31,.14); }
.sv-q-imgprev { margin: .5rem 0; }
.sv-q-imgprev img { max-width: 220px; max-height: 130px; border-radius: 10px; display: block; }

/* Modale anteprima sondaggio: si adatta al contenuto, niente barra inutile */
.modal-card.prev-modal { max-height: none; overflow-y: visible; max-width: 1180px; }
.modal-card.prev-modal .sv-prev-box { padding: .4rem; }
.modal-card.prev-modal .sv-prev-frame { display: block; }

/* Modali immagine: Rimuovi a sinistra, Scegli al centro, Fatto a destra */
.img-modal-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; margin-top: 1rem; }
.img-modal-actions > *:first-child { justify-self: start; }
.img-modal-actions > *:last-child { justify-self: end; }
.btn-danger-text { color: var(--md-error); }
.btn-danger-text:hover { background: rgba(211, 47, 47, .10); border-radius: 8px; }


/* Badge "Scan QR": stessa forma di Regia Live, colore distinto */
.btn-scanqr { background: #1f7a8c; box-shadow: 0 2px 8px rgba(31,122,140,.35); }
.btn-scanqr:hover { background: #1a6a7a; }
/* Tab Info */

.info-box { text-align: center; padding: .5rem 0; }
.info-logo { max-height: 72px; width: auto; display: block; margin: 0 auto .8rem; }
.info-nome { margin: 0; font-size: 1.8rem; letter-spacing: .01em; }
.info-ver { color: var(--md-on-surface-variant); font-size: .9rem; margin-top: .2rem; }
.info-upd { font-size: .85rem; color: var(--md-on-surface-variant); min-height: 1.2rem; line-height: 1.5; }
.info-sep { height: 1px; background: var(--md-outline-variant); margin: 1.1rem auto; max-width: 320px; }
.info-credit { margin: .2rem 0; font-size: .92rem; }
.info-credit a { color: var(--md-primary); text-decoration: none; }
.info-credit a:hover { text-decoration: underline; }
.info-tech { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; font-size: .85rem; }
.info-tech > div { display: flex; flex-direction: column; }
.info-tech span { color: var(--md-on-surface-variant); font-size: .78rem; }

/* Logo dell'autore nella tab Info */
.info-logo-autore { max-width: 300px; margin: 0 auto 1rem; color: var(--md-on-surface); }
.info-logo-autore svg { width: 100%; height: auto; display: block; }

/* Scanner: riepilogo accessi in pagina + barra offline solo quando serve */
.sc-offline[hidden] { display: none !important; }   /* l'attributo hidden vince sul display:flex */
.sc-accessi { margin-top: 1rem; text-align: left; }
.sc-accessi .acc-kpis { margin-bottom: .5rem; }
.sc-elenco { border: 1px solid var(--md-outline-variant); border-radius: 10px; padding: .5rem .7rem; }
.sc-elenco summary { cursor: pointer; font-size: .88rem; font-weight: 600; }
.sc-elenco[open] summary { margin-bottom: .5rem; }
.sc-riga-in { background: rgba(31,122,31,.07); }

/* Regola generale: l'attributo hidden deve sempre prevalere sul display impostato */
[hidden] { display: none !important; }

/* Iscritti che hanno annullato: restano visibili ma barrati */
.acc-annullato { opacity: .55; }
.acc-annullato .sv-td-user { text-decoration: line-through; }

/* Elenco sondaggi su mobile: titolo e stato su una riga, azioni sotto.
   Evita che i pulsanti schiaccino il testo in una colonna strettissima. */


/* Titolo e badge dell'elenco sondaggi */
.sv-adm-nome { font-weight: 600; }
.sv-adm-badges { display: inline-flex; gap: .3rem; flex-wrap: wrap; align-items: center; }


/* Documenti su mobile: nome su riga intera, cinque azioni in griglia sotto.
   Stesso criterio applicato all'elenco sondaggi. */


/* Email e Newsletter su mobile: le azioni escono dalla posizione sovrapposta
   (lo spazio riservato non basta con 4 pulsanti) e vanno sotto il testo. */


/* ============================================================
   RIFINITURE MOBILE — schermi fino a 720px
   ============================================================ */


/* Appunti: aggiorna e "+ Nuovo" allineati sulla stessa linea */
.imp-head .btn-round { align-self: center; }


/* Pulsante attiva notifiche + azioni tab Info */
.notif-attiva { margin-bottom: .6rem; }
.notif-attiva button { width: 100%; font-size: .86rem; padding: .45rem; }
.info-azioni { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: .9rem 0; }

/* ============================================================
   MOBILE — testate delle pagine gestionali
   Soci: titolo | anno+kebab · ricerca · filtri
   Entrate/Uscite/Rimborsi: titolo esteso, filtri sotto i pulsanti
   ============================================================ */


/* Pagina Contabilità: linguette in stile Impostazioni.
   Il contenuto della sotto-pagina vive dentro il riquadro connesso alle schede. */

.cont-page > .section-title { margin-top: 0; }
.cont-page > *:not(.cont-head) { position: relative; z-index: 1; }
.cont-page {
    /* riquadro unico che ingloba il contenuto sotto le linguette */
    --cont-pad: 1rem;
}
.cont-page > .cont-head + * { margin-top: 0; }

/* Barra in basso: selezione simmetrica e concentrica, anche agli estremi */


/* Contabilità: il contenuto sta dentro il riquadro agganciato alle linguette */

.cont-body > .section-title:first-child { margin-top: 0; }



/* Pulsante stato notifiche */
.notif-attiva button { width: 100%; font-size: .86rem; padding: .5rem; }
.notif-attiva .notif-on { opacity: .8; }

/* ============================================================
   MOBILE — nessun contenuto oltre il margine destro
   Le cause tipiche: elementi in griglia/flex senza min-width,
   larghezze fisse, testi lunghi non spezzabili.
   ============================================================ */


/* Stato notifiche: pulsantino in alto a destra nel popover della campanella */
.notif-pop-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.notif-perm {
    font-size: .7rem; font-weight: 700; line-height: 1;
    padding: .28rem .55rem; border-radius: 999px;
    border: 1px solid var(--md-outline-variant);
    background: var(--md-surface); color: var(--md-on-surface-variant);
    cursor: pointer; white-space: nowrap; font-family: inherit;
}
.notif-perm:hover { background: var(--md-surface-variant); }
.notif-perm.ok { background: rgba(31,122,31,.12); color: #1f7a1f; border-color: transparent; cursor: default; }
.notif-perm.ko { background: rgba(211,47,47,.12); color: var(--md-error); border-color: transparent; }

/* ============================================================
   MOBILE — le pagine tornano a scorrimento naturale
   I layout "a tutta altezza" servono su desktop (bento affiancate
   con scroll interno); su schermi piccoli impediscono di vedere
   il contenuto oltre il bordo inferiore.
   ============================================================ */


/* --- Correzioni mobile mirate --- */


/* Kebab aperto: il suo contenitore passa sopra tutto il resto della pagina */
.kebab-aperto { z-index: 900 !important; position: relative; }
.title-row { position: relative; z-index: 5; }   /* sotto l'intestazione di pagina */
.section-title { z-index: 30; }

/* Pulsante "+" compatto nell'elenco sondaggi */
.btn-solo-piu { min-width: 44px; padding: .5rem .9rem; font-size: 1.3rem; line-height: 1; font-weight: 600; }

/* ============================================================
   MOBILE — le tabelle degli elenchi diventano schede leggibili
   Su schermo stretto una tabella a 5 colonne è illeggibile:
   ogni riga diventa una scheda con etichette esplicite.
   ============================================================ */


/* ============================================================
   MOBILE — scorrimento con blocco dinamico
   1) titolo e pulsanti restano fissi in alto, senza linee né spazi;
   2) l'intestazione di ogni tabella si blocca sotto di essi
      finché quella tabella è a schermo, poi lascia il posto
      all'intestazione della tabella successiva.
   ============================================================ */


/* Contabilità su mobile: barra compatta e movimenti leggibili */


/* ===== CARNET BIGLIETTI: editor ===== */
/* Impostazioni su due colonne, per non allungare il pannello */
.cn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; }
.cn-grid2 .att-prop { margin: 0; }

/* Anteprima della pagina A4 con la disposizione dei biglietti */
.cn-prev-tit { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: .9rem 0 .3rem; }
.cn-prev {
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;      /* proporzioni A4 */
    background: #fff;
    border: 1px solid var(--md-outline-variant);
    border-radius: 6px;
    overflow: hidden;
}

/* Segnaposto (QR e testo): bordo tratteggiato BICOLORE, così resta leggibile
   sia su grafiche chiare sia su grafiche scure. Due bordi sovrapposti con i
   trattini sfalsati: uno bianco, uno grigio scuro. */
/* Bordo a segmenti ALTERNATI bianco/grigio scuro: linea continua a due colori
   (non un tratteggio, che lascerebbe passare lo sfondo), così resta visibile su
   qualsiasi grafica. Specificità .att-field.cn-ph per battere .att-field.sel,
   che con la scorciatoia `background` azzererebbe i gradienti. */
.att-field.cn-ph, .att-field.cn-ph.sel {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,.9);
    border: 0;
    box-sizing: border-box;
    background-color: rgba(0,0,0,.16);
    background-image:
        repeating-linear-gradient(90deg, #fff 0 7px, #262626 7px 14px),
        repeating-linear-gradient(90deg, #fff 0 7px, #262626 7px 14px),
        repeating-linear-gradient(0deg, #fff 0 7px, #262626 7px 14px),
        repeating-linear-gradient(0deg, #fff 0 7px, #262626 7px 14px);
    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: no-repeat;
}
.att-field.cn-ph.sel { box-shadow: 0 0 0 2px var(--md-primary); }
.cn-ph-qr { letter-spacing: .06em; }

/* Carnet: editor a tre colonne (biglietto · impostazioni · anteprima pagina).
   Su desktop l'anteprima sta a destra, così non serve scorrere. */
@media (min-width: 900px) {
    .att-editor.cn-editor {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(200px, .8fr);
        gap: 1rem;
        align-items: start;
    }
    .att-editor.cn-editor .att-preview-wrap,
    .att-editor.cn-editor .att-panel,
    .att-editor.cn-editor .cn-col-prev { min-width: 0; }
}
.cn-col-prev .cn-prev-tit { margin-top: 0; }


/* Modale carnet: 16:9 mantenendo l'altezza. Serve !important perche'
   .attestati-modal impone max-width 880px, che rendeva il riquadro quadrato. */
.modal-card.cn-modal {
    height: 88vh;
    max-height: 88vh;
    width: min(95vw, 156vh) !important;   /* 88vh x 16/9 */
    max-width: 95vw !important;
    display: flex;
    flex-direction: column;
}
.modal-card.cn-modal #modalBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-card.cn-modal #cnBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

@media (min-width: 900px) {
    .modal-card.cn-modal .att-editor.cn-editor {
        display: grid;
        /* Colonna 1 larga quanto la grafica del biglietto; colonna 3 elastica ma
           con minimo 0, così la pagina di anteprima si adatta invece di sforare. */
        grid-template-columns: 320px minmax(240px, 1fr) minmax(0, 1.1fr);
        overflow: hidden;
        gap: 1rem;
        flex: 1 1 auto;
        min-height: 0;
        align-items: stretch;
    }
    /* la colonna del biglietto non deve sforare: l'immagine si adatta */
    .modal-card.cn-modal .att-editor.cn-editor > .att-preview-wrap { overflow: auto; }
    .modal-card.cn-modal .att-editor.cn-editor .att-preview { max-width: 100%; }
    .modal-card.cn-modal .att-editor.cn-editor > .att-preview-wrap,
    .modal-card.cn-modal .att-editor.cn-editor > .att-panel {
        border-right: 1px solid var(--md-outline-variant);
        padding-right: 1rem;
    }
    .modal-card.cn-modal .att-editor.cn-editor > .att-panel { overflow-y: auto; }
    .modal-card.cn-modal .cn-col-prev { display: flex; flex-direction: column; min-height: 0; }
    .modal-card.cn-modal .cn-col-prev .cn-prev {
        /* Si adatta a ENTRAMBE le dimensioni: parte dall'altezza disponibile e,
           se risultasse più larga della colonna, viene limitata dalla larghezza
           (l'aspect-ratio riduce l'altezza di conseguenza). */
        flex: 0 1 auto;
        height: 100%;
        width: auto;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 210 / 297;
        margin: 0 auto;
    }
    .modal-card.cn-modal .cn-col-prev { overflow: hidden; }
    /* La grafica non supera la colonna (larghezza e altezza le imposta il JS) */
    .modal-card.cn-modal .att-editor.cn-editor .att-preview { max-width: 100%; }
}


/* Titoletti di sezione nell'editor carnet */
.cn-sez-tit {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    opacity: .7; margin: 0 0 .5rem; font-weight: 700;
}
/* Pulsante "Genera PDF" in basso a destra nella colonna dell'anteprima */
.cn-prev-actions { display: flex; justify-content: flex-end; margin-top: .7rem; }
/* La pagina di anteprima non deve mai eccedere la larghezza della colonna */
.cn-col-prev .cn-prev { max-width: 100%; }

/* KPI "Biglietti generati": numero grande + dettaglio sotto, cliccabile */
.acc-kpi.acc-kpi-big { cursor: pointer; transition: background .15s ease, transform .15s ease; }
.acc-kpi.acc-kpi-big:hover { background: var(--md-surface-variant); transform: translateY(-1px); }
.acc-kpi .acc-sub { font-size: .74rem; opacity: .75; margin-top: .15rem; }
/* Pulsanti della scheda utente dopo la scansione: tutti su una riga */
.actions.sc-actions { display: flex; }

/* Generatore QR nelle impostazioni: campo + pulsante + anteprima sulla stessa riga */
/* Il QR sta a destra della colonna SINISTRA dei campi soprastanti: la griglia
   è 1fr 1fr con gap .75rem, quindi la colonna misura calc(50% - .375rem).
   L'altezza è quella del blocco titolo + campo (~96px), non elastica: con
   l'altezza automatica e il rapporto 1:1 il riquadro si ingigantiva. */
.qrgen-wrap { display: flex; align-items: stretch; gap: 1rem; max-width: calc(50% - 0.375rem); }
.qrgen-main { flex: 1 1 auto; min-width: 0; }
.qrgen-row { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
/* Il campo occupa lo spazio che resta dopo pulsante e QR */
.qrgen-campo { flex: 1 1 auto; min-width: 140px; margin: 0; }
.qrgen-box {
    flex: 0 0 auto;
    align-self: stretch;        /* alto quanto il blocco: titolo + campo */
    margin-left: auto;          /* spinto al bordo destro della colonna */
    width: 112px;
    height: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
@media (max-width: 720px) {
    .qrgen-wrap { max-width: none; }
}
.qrgen-box img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; display: block; }

/* Selettore socio: livello sopra la modale utente, senza sostituirla */
.soc-pick-ov { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 1rem; }
.soc-pick-card { background: var(--md-surface); border-radius: 16px; padding: 1rem; width: min(460px, 96vw); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.soc-pick-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.soc-pick-lista { overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.soc-pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: inherit; font: inherit; }
.soc-pick-item:hover { background: var(--md-surface-variant); }
.soc-pick-item small { opacity: .7; font-size: .82rem; }

/* Builder: blocchi annidati dentro le colonne */
.nlb-sub { border: 1px dashed var(--md-outline-variant); border-radius: 8px; margin: .4rem 0; background: rgba(0,0,0,.02); }
.nlb-sub.selected { border-color: var(--md-primary); box-shadow: 0 0 0 2px var(--md-primary); }
.nlb-sub-bar { display: flex; align-items: center; justify-content: space-between; gap: .3rem; font-size: .72rem; padding: .15rem .35rem; opacity: .8; }
.nlb-sub-bar button { border: 0; background: transparent; cursor: pointer; font-size: .72rem; padding: 0 .15rem; color: inherit; }
.nlb-sub-bar button.danger { color: var(--md-error); }
.nlb-col-add { display: block; width: 100%; margin-top: .4rem; padding: .3rem; font-size: .78rem; border: 1px dashed var(--md-outline-variant); border-radius: 8px; background: transparent; cursor: pointer; color: inherit; opacity: .75; }
.nlb-col-add:hover { opacity: 1; background: var(--md-surface-variant); }
.nlb-col-menu { display: flex; flex-direction: column; gap: .15rem; margin-top: .3rem; border: 1px solid var(--md-outline-variant); border-radius: 8px; padding: .25rem; background: var(--md-surface); max-height: 220px; overflow-y: auto; }
.nlb-col-menu button { border: 0; background: transparent; text-align: left; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; font-size: .8rem; color: inherit; }
.nlb-col-menu button:hover { background: var(--md-surface-variant); }

/* Editor pubblicazione: titolo · stato · aperto a, in proporzione 2:1:1 */
.pg-campi { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .75rem; }
.pg-campi .field { margin-bottom: .5rem; min-width: 0; }
@media (max-width: 720px) { .pg-campi { grid-template-columns: 1fr; } }
/* Anteprima: il riquadro può usare buona parte dell'altezza della finestra */
.modal-card.prev-modal { max-height: 92vh; }
.modal-card.prev-modal .sv-prev-box { max-height: 82vh; }

/* Builder: proprietà affiancate e campo colore compatto */
.nlb-riga { display: flex; gap: .5rem; align-items: flex-end; }
.nlb-riga .nlb-f { flex: 1; min-width: 0; }
.nlb-f-color { flex: 0 0 auto !important; }
.nlb-f-color input[type="color"] { width: 38px; height: 32px; padding: 0; border-radius: 8px; cursor: pointer; }
/* Le colonne del Gruppo si impilano su schermi stretti: niente colonnine strette */
@media (max-width: 620px) {
    .nlb-canvas .nlb-block-preview > div[style*="display:flex"] { flex-wrap: wrap; }
    .nlb-canvas .nlb-col { flex: 1 1 100% !important; }
}

/* Builder: la pagina è selezionabile come un blocco */
.nlb-canvas.nlb-pagina-sel { outline: 2px solid var(--md-primary); outline-offset: -2px; border-radius: 8px; }
.nlb-props-tit { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; font-weight: 700; margin-bottom: .5rem; }

/* Builder: interruttore (es. angoli singoli) compatto nella riga proprietà */
.nlb-f-check { display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; }
.nlb-f-check input[type="checkbox"] { width: auto; margin: 0; }

/* Avviso di assenza connessione */
.banner-offline {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
    max-width: min(560px, 94vw); z-index: 3000;
    background: #8a4b00; color: #fff;
    padding: .7rem 1rem; border-radius: 12px;
    font-size: .88rem; text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

/* Menu utente: le voci sono link ma non devono apparire sottolineate */
.user-menu-item, .user-menu-item:hover, .user-menu-item:visited { text-decoration: none; }

/* Gestione URL: una bento comune divisa a metà da una linea centrale (come le
   altre pagine), e sotto una riga a tutta larghezza con le visite dal sito.
   L'angolo in alto a sinistra è retto perché sopra c'è la barra delle schede. */
/* Gestione URL: una sola sezione (reindirizzamenti). La bento è la cornice;
   la tabella sta DENTRO, come nelle altre schede. */
/* Altezza e cornice della tabella le danno le regole comuni del riquadro
   principale (framePrincipale + desktop.css): qui solo la spaziatura della
   bento dei reindirizzamenti. La cornice della tabella specifica di "Web"
   raddoppiava il bordo su telefono (card dentro card). */
#pgPanelUrl > .url-box {
    padding: 1rem;
    box-sizing: border-box;
}
/* Sotto la barra delle schede l'angolo in alto a sinistra è retto: la bento
   prosegue la linguetta attiva. Vale sia per "Web" sia per "Gestione URL". */
#pgPanelUrl > .url-box,
#pgPanelUrl > .lista-box,
#pgPanelWeb > .lista-box { border-top-left-radius: 0 !important; }
.url-split > .url-col { min-width: 0; padding: 1rem; }
.url-split > .url-col + .url-col { border-left: 1px solid var(--t-line, var(--md-outline-variant)); }
.url-visite { width: 100%; margin-top: 1rem; padding: 1rem; }
.url-visite[hidden] { display: none; }
@media (max-width: 720px) {
    .url-split { grid-template-columns: 1fr !important; }
    .url-split > .url-col + .url-col {
        border-left: 0;
        border-top: 1px solid var(--t-line, var(--md-outline-variant));
    }
}
.nuovo-url-scelta { display: flex; flex-direction: column; gap: .6rem; }
.nuovo-url-scelta button { width: 100%; justify-content: flex-start; padding: .9rem 1rem; font-size: 1rem; }

/* Visite dal sito: solo tabella, senza cornice; toolbar con filtri e azioni */
.px-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
/* socio.php: tasto Applica accanto al toggle */
.ui-switch .adv-apply-top { margin-left: auto; }

/* Gestione URL: la tabella reindirizzamenti come le altre (bordi, angoli, testo centrato) */
#rdLista .table-wrap {
    border: 1px solid var(--t-line, var(--md-outline-variant)) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
#rdLista table th, #rdLista table td { text-align: center; }
#rdLista table th.col-text, #rdLista table td.col-text { text-align: left; }
#rdLista .rd-riga:hover td { background: rgba(0,0,0,.03); }

/* socio.php: toggle e Applica su una riga, Applica a DESTRA */
.adv-toggle-row { display: flex; align-items: center; gap: 1rem; width: 100%; }
.adv-toggle-row .ui-switch { margin: 0; flex: 0 0 auto; }
.adv-toggle-row .adv-apply-top { margin-left: auto; flex: 0 0 auto; }

/* ===== Scanner ingressi in modale (v7.69) ===== */
/* Modale quasi a tutto schermo, header fisso, corpo scrollabile, niente X. */
.modal-overlay .modal-card.scanner-modal {
    max-width: 95vw !important; width: 95vw;
    height: 92vh; max-height: 92vh;
    margin: 0 !important;               /* niente margin-bottom:70px del mobile: resta centrata */
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-card.scanner-modal > header { flex: 0 0 auto; }
.modal-card.scanner-modal #modalBody { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal-card.scanner-modal #modalClose { display: none; }
.scanner-modal-body { position: relative; display: flex; flex-direction: column; min-height: 100%; }

/* KPI in cima */
.sc-kpi-top { margin-bottom: .8rem; }
.sc-kpi-top:empty { display: none; }

/* Quadrato del video: sempre visibile (bianco), il video spunta all'avvio */
.qr-scan-box.sc-box-always {
    display: block !important; position: relative;
    background: #fff; min-height: 260px; border-radius: 14px; overflow: hidden;
    margin-bottom: 1rem;
}
.sc-box-always #scVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-box-always #scVideo:not(.sc-live) { display: none; }
.sc-box-msg {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: .45rem .6rem; background: rgba(0,0,0,.55); color: #fff;
    font-size: .82rem; text-align: center;
}

/* Bento con i due pulsanti + lente */
.sc-scan-bento { margin-bottom: 1rem; }
.sc-scan-btns { display: flex; gap: .5rem; }
.sc-scan-btns .btn-scan { flex: 1 1 0; min-width: 0; background: var(--md-primary); color: #fff; border: none; }
.sc-scan-btns .btn-scan:hover { background: var(--md-primary); filter: brightness(1.18); }
.sc-scan-btns { align-items: center; }
.sc-scan-btns .sc-scan-cerca { width: 44px; height: 44px; font-size: 1.1rem; }

/* Riga piè: conteggio + suono */
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .2rem 0 .8rem; font-size: .9rem; color: var(--md-on-surface-variant); }
/* Pulsante Chiudi a tutta larghezza, in fondo */
.sc-close-btn { width: 100%; margin-top: auto; background: #b23a2e !important; color: #fff !important; border: none; }
.sc-close-btn:hover { background: #9c3025 !important; }

/* Le schede per-QR (valido/non valido) come pannello interno allo scanner. */
/* Scheda del QR: copre l'intera modale scanner (intestazione compresa) */
.modal-card.scanner-modal { position: relative; }
.sc-result-overlay { position: absolute; inset: 0; background: var(--md-surface); z-index: 20; display: flex; overflow: hidden; }
.sc-result-overlay[hidden] { display: none; }
.sc-res { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; }
.sc-res-head { position: relative; flex: 0 0 auto; text-align: center; font-size: 1.5rem; font-weight: 800; padding: 1rem 2.6rem; border-radius: 14px; }
.sc-res-ok   { background: #e3f4e5; color: #1b6e24; }
.sc-res-warn { background: #fff1d6; color: #8a5a00; }
.sc-res-ko   { background: #fbe3e0; color: #a3241a; }
.sc-res-x { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sc-res-body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: 1rem 0; }
.sc-res-card { margin: 0; }
.sc-res-anag { text-align: center; }
.sc-res-riga { font-size: 1.25rem; padding: .2rem 0; overflow-wrap: anywhere; }
.sc-res-mail { font-size: .95rem; color: var(--md-on-surface-variant); }
.sc-res-acc { text-align: center; }
.sc-res-acc .acc-n { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.sc-res-acc .acc-l { color: var(--md-on-surface-variant); }
.sc-res-btns { flex: 0 0 auto; display: flex; gap: .6rem; }
.sc-res-btns > button { flex: 1 1 0; width: auto; min-height: 52px; }
html[data-theme="dark"] .sc-res-ok   { background: #1f3a22; color: #9be0a3; }
html[data-theme="dark"] .sc-res-warn { background: #3a2e14; color: #f2c46b; }
html[data-theme="dark"] .sc-res-ko   { background: #3d1f1c; color: #f2a39b; }

/* Modalina di ricerca iscritto (sopra lo scanner) */
.sc-search-overlay { position: fixed; inset: 0; z-index: 12100; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem 1rem; }
.sc-search-card { background: var(--md-surface); border-radius: 16px; width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; padding: 1rem; box-shadow: 0 24px 64px var(--md-shadow); }
.sc-search-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.sc-search-input { width: 100%; flex: 0 0 auto; margin-bottom: .6rem; }
.sc-search-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.sc-search-item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .1rem; padding: .55rem .7rem; border: 1px solid var(--md-outline-variant, #ddd); border-radius: 10px; background: var(--md-surface); cursor: pointer; font: inherit; }
.sc-search-item small { color: var(--md-on-surface-variant); font-size: .8rem; }
.sc-search-item:active { background: var(--md-surface-variant); }

/* Documenti: azioni dell'anteprima in fondo (Elimina · Copia link … Stampa) */
.doc-azioni-fondo { margin: 1rem 0 0; align-items: center; }
/* Contabilità: totali dentro il riquadro (anche su telefono) */
.cont-body > .totali-in-frame { margin-top: auto; padding-top: .8rem; }

/* Documenti: rilascio dei file sul riquadro */
.doc-frame { position: relative; }
.doc-frame.doc-drop-on { outline: 2px dashed var(--md-primary); outline-offset: -8px; }
.doc-frame.doc-drop-on::after {
    content: "⬇  Rilascia qui per caricare";
    position: absolute; inset: 8px; border-radius: 12px; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--md-primary) 10%, var(--md-surface) 90%);
    color: var(--md-primary); font-weight: 700; font-size: 1.15rem; pointer-events: none;
}

/* Intestazione fissa durante il caricamento della pagina */
.st-scheletro .page-actions, .frame-scheletro .table-wrap { display: none; }
.frame-scheletro .loading { padding: 3rem 1rem; }

/* Reindirizzamenti: il pulsante copia nella descrizione serve solo su telefono */
.rd-copia-mob, .rd-visite-mob { display: none; }
.rd-info { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin: .2rem 0 .4rem; color: var(--md-on-surface-variant); font-size: .9rem; }
.rd-info > span { white-space: nowrap; }
.rd-info > .btn-secondary { white-space: nowrap; padding: .45rem .9rem; font-size: .88rem; margin: 0; }

/* ===== Trasferimenti file (Pubblicazioni → Trasferimenti) ===== */
#pgPanelTrasf > .url-box { padding: 1rem; box-sizing: border-box; border-top-left-radius: 0 !important; }
#trLista .table-wrap { overflow: hidden; border: 1px solid var(--t-line, var(--md-outline-variant)) !important; border-radius: 12px !important; }
.trasf-box .track-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tr-spazio { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--md-on-surface-variant); }
.tr-barra { width: 140px; height: 7px; border-radius: 9px; background: var(--md-surface-variant); overflow: hidden; display: inline-block; }
.tr-barra i { display: block; height: 100%; background: var(--md-primary); }
.tr-stato-mob { display: none; }
.tr-check { display: flex; align-items: flex-start; gap: .5rem; margin: .45rem 0; font-size: .92rem; cursor: pointer; }
.tr-check input { margin-top: .2rem; width: auto; }
.tr-check small, .tr-form label small { color: var(--md-on-surface-variant); font-weight: 400; }
.tr-sub { margin: .2rem 0 .6rem 1.6rem; padding: .6rem .8rem; border-left: 3px solid var(--md-outline-variant); background: var(--md-surface-variant); border-radius: 0 10px 10px 0; }
.tr-senza { margin-top: .35rem; font-size: .85rem; font-weight: 600; color: #8a5a00; }
.tr-drop { border: 2px dashed var(--md-outline-variant); border-radius: 14px; padding: 1rem; text-align: center; cursor: pointer; color: var(--md-on-surface-variant); transition: background .15s, border-color .15s; }
.tr-drop b { color: var(--md-on-surface); }
.tr-drop.on { border-color: var(--md-primary); background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.tr-drop-o { font-size: .85rem; margin-top: .2rem; }
.tr-coda { margin-top: .4rem; }
.tr-q { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; align-items: center; padding: .35rem 0; font-size: .85rem; border-bottom: 1px solid var(--md-outline-variant); }
.tr-q-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-q small { color: var(--md-on-surface-variant); }
.tr-q-b { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--md-surface-variant); overflow: hidden; }
.tr-q-b i { display: block; height: 100%; width: 0; background: var(--md-primary); transition: width .2s; }
.tr-q.ok .tr-q-b i { background: #2e7d32; }
.tr-q.ko .tr-q-b i { background: var(--md-error); }
.tr-link { display: flex; align-items: center; gap: .5rem; }
.tr-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; background: var(--md-surface-variant); padding: .5rem .7rem; border-radius: 10px; }
.tr-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.tr-qr { text-align: center; margin-top: .7rem; }
.tr-files { max-height: 40vh; overflow-y: auto; }
.tr-f { display: flex; align-items: center; gap: .4rem; padding: .45rem 0; border-bottom: 1px solid var(--md-outline-variant); }
.tr-f-n { flex: 1; min-width: 0; }
.tr-f-n div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; }
.tr-f-n small { color: var(--md-on-surface-variant); font-size: .78rem; }
.tr-f a.btn-icon { text-decoration: none; }

.tr-scad-off { opacity: .45; pointer-events: auto; background: var(--md-surface-variant); }

.tr-files-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .9rem 0 .4rem; }
.tr-files-head h4 { margin: 0; }
.tr-zip { width: auto; text-decoration: none; padding: .4rem .9rem; font-size: .85rem; margin: 0; }
.tr-azioni { flex-wrap: nowrap; gap: .5rem; }
.tr-azioni > button { width: auto; margin: 0; white-space: nowrap; }
.tr-az-del { color: var(--md-error); }

.tr-mod { display: flex; gap: .4rem; }
.tr-mod button { flex: 1 1 0; padding: .6rem .4rem; border-radius: 12px; border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tr-mod button.on { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary, #fff); }
.tr-sub[hidden], [data-per][hidden] { display: none !important; }
.tr-sub { margin-left: 0; }

/* Anagrafiche donazioni (piattaforme, donatori) */
.anag-lista { max-height: 55vh; overflow-y: auto; }
.anag-riga { display: flex; align-items: center; gap: .6rem; padding: .65rem .2rem; border-bottom: 1px solid var(--md-outline-variant); cursor: pointer; }
.anag-riga:hover { background: var(--md-surface-variant); }
.anag-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anag-t small { color: var(--md-on-surface-variant); font-size: .8rem; }
.anag-freccia { color: var(--md-on-surface-variant); font-size: 1.3rem; }
.rd-comm { margin-top: .35rem; font-size: .82rem; color: var(--md-on-surface-variant); }

/* Entrata: ricevuta già emessa (riga informativa sotto i pulsanti) */
.en-ricevuta { margin-top: .6rem; font-size: .82rem; color: var(--md-on-surface-variant); text-align: right; }
#enCat:disabled { opacity: .75; cursor: not-allowed; }

/* ===== Finestra Entrata (bozza): gerarchia dei dati ===== */
.en-cat-head { display: flex; align-items: center; gap: .6rem; margin-left: auto; margin-right: .8rem; }
.en-cat-head label { font-size: .85rem; font-weight: 600; color: var(--md-on-surface-variant); }
.en-cat-head select { min-width: 190px; }
.en-cat-head select:disabled { opacity: .8; cursor: not-allowed; }
.entrata-form .en-g { display: grid; gap: .1rem 1.1rem; align-items: end; }
.entrata-form .en-g > .field { margin-bottom: .6rem; min-width: 0; }
.en-g-desc  { grid-template-columns: 58fr 42fr; }
.en-g-chi   { grid-template-columns: 70fr 30fr; }
.en-g-vers  { grid-template-columns: 1.15fr .85fr 1.3fr 1fr; }
.en-g-vers:has(#enPiattWrap:not([hidden])) { grid-template-columns: 1.1fr .85fr 1.2fr 1fr 1fr; }
.en-g-netto { grid-template-columns: 1.25fr 1fr auto auto; align-items: center; }
.en-g-netto > .field { margin-bottom: 0; }
.en-g-netto .en-mostra { margin: 1.3rem 0 0; white-space: nowrap; }
.en-g-netto .en-stampa { margin: 1.3rem 0 0; width: auto; white-space: nowrap; border-radius: 999px; padding: .6rem 1.2rem; }
.en-g-altro { grid-template-columns: 1fr 1fr; }
.en-box { border: 1px solid var(--md-outline-variant); border-radius: 16px; padding: .9rem 1rem .8rem; margin: .2rem 0 .9rem; }
.en-box > .field { margin-bottom: .6rem; }
.en-azioni { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.en-azioni .en-ricevuta { margin: 0; text-align: center; }
.en-azioni .en-ricevuta[hidden] { display: block !important; visibility: hidden; }

.modal-card.en-modal { max-width: min(1120px, 96vw); width: 100%; }
.entrata-form .en-g > .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Stessa altezza per tutti i campi: etichette e caselle sulla stessa linea */
.entrata-form input:not([type=checkbox]), .entrata-form select, .en-cat-head select { height: 42px; box-sizing: border-box; margin: 0; }
.entrata-form .en-g > .field > label { display: block; line-height: 1.25; margin-bottom: .35rem; }
.en-g-netto { align-items: end; }
.en-g-netto > #enNettoSlot > .field { margin-bottom: 0; }
.en-g-netto .en-mostra { margin: 0; height: 42px; display: flex; align-items: center; }
.en-g-netto .en-stampa { margin: 0; height: 42px; display: inline-flex; align-items: center; }
.entrata-form .en-g-netto > .field, .entrata-form .en-g-netto > #enNettoSlot > .field { margin-bottom: 0; }

/* Trasferimenti: link di sola lettura nel dettaglio */
.tr-lettura { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .5rem .6rem; border: 1px dashed var(--md-outline-variant); border-radius: 12px; }
.tr-lettura code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; background: var(--md-surface-variant); padding: .45rem .6rem; border-radius: 10px; }
.tr-lett-tit { font-size: .85rem; font-weight: 600; color: var(--md-on-surface-variant); white-space: nowrap; }
.tr-lettura .btn-secondary { margin: 0 0 0 auto; padding: .4rem .9rem; font-size: .85rem; }
.tr-lett-off { color: var(--md-error); width: auto; margin: 0; padding: .3rem .4rem; }
.tr-qr-lbl { font-size: .8rem; color: var(--md-on-surface-variant); margin-top: .3rem; }

.tr-lettura { flex-wrap: wrap; }

/* Dettaglio trasferimento: miniature nell'elenco */
.tr-f-th { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; background: var(--md-surface-variant); display: grid; place-items: center; overflow: hidden; font-size: 1.1rem; }
.tr-f-th img { width: 100%; height: 100%; object-fit: cover; }
.tr-f { gap: .6rem; }
/* Link di sola lettura: una riga, in fondo e discreta (non sempre serve) */
.tr-lettura { border: 0; border-top: 1px solid var(--md-outline-variant); border-radius: 0; padding: .6rem 0 0; margin-top: .8rem; flex-wrap: wrap; opacity: .9; }
.tr-lettura .tr-lett-tit { font-weight: 500; font-size: .8rem; }
.tr-lett-crea { border: 0; background: none; padding: 0; margin-left: auto; font: inherit; font-size: .8rem; color: var(--md-primary); text-decoration: underline; cursor: pointer; }
.tr-lettura code { font-size: .75rem; padding: .35rem .5rem; }
.tr-lettura .btn-round { width: 32px; height: 32px; font-size: .85rem; }
.tr-lettura .tr-lett-off { font-size: .8rem; }
input.tr-lett-nota { flex: 1 1 100%; font-size: .82rem; padding: .4rem .6rem; height: auto; margin-top: .2rem; }

/* Trasferimenti (gestionale): ingrandimento delle foto, sopra la finestra aperta */
.tr-f-th img[data-zoom], .tr-q-th img { cursor: zoom-in; }
.tr-q { grid-template-columns: auto 1fr auto; }
.tr-q-th { grid-row: span 2; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: var(--md-surface-variant); display: grid; place-items: center; font-size: .95rem; }
.tr-q-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-q .tr-q-b { grid-column: 2 / -1; }
.ga-lb { position: fixed; inset: 0; z-index: 12900; background: rgba(10,14,15,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 20px; }
.ga-lb img { max-width: 100%; max-height: calc(100% - 110px); min-height: 0; object-fit: contain; border-radius: 6px; background: #111; }
.ga-lb-x { position: absolute; top: 10px; right: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; cursor: pointer; }
.ga-lb-nome { color: #dfe6e6; font-size: .85rem; margin-top: 12px; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-lb-dl { margin-top: 12px; width: auto; text-decoration: none; }
.ga-lb-car { color: #9fb0b0; font-size: .85rem; position: absolute; }

.tr-f.tr-f-zoom { cursor: zoom-in; }
.tr-f.tr-f-zoom:hover { background: var(--md-surface-variant); }
.tr-q.tr-f-zoom { cursor: zoom-in; }

/* QR in primo piano */
.ga-lb-qr .ga-qr-card { background: #fff; border-radius: 18px; padding: 18px 18px 14px; text-align: center; max-width: 92vw; }
.ga-lb-qr .ga-qr-card img { width: 280px; height: 280px; max-width: 70vw; max-height: 70vw; display: block; margin: 0 auto; }
.ga-qr-lbl { margin-top: .6rem; font-weight: 700; color: #1c2526; }
.ga-qr-url { margin-top: .25rem; font-size: .75rem; color: #5f6b6c; word-break: break-all; max-width: 300px; }

/* Trasferimento diretto */
.tr-diretto { width: auto; margin: 0 0 0 auto; padding: .45rem .9rem; font-size: .85rem; }
.p2p-stato { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.p2p-stato .pallino { width: 12px; height: 12px; border-radius: 50%; background: #e0a800; box-shadow: 0 0 0 4px #fff3cd; flex: 0 0 auto; }
.p2p-stato.ok .pallino { background: #1b8a2a; box-shadow: 0 0 0 4px #dcf2df; }
.p2p-stato.ko .pallino { background: #c62828; box-shadow: 0 0 0 4px #fbe3e0; }
.p2p-nota { font-size: .8rem; color: var(--md-on-surface-variant); margin-top: .4rem; }
.p2p-codice { margin-top: .7rem; font-size: .9rem; }
.p2p-codice b { font-size: 1.4rem; letter-spacing: .3em; font-family: ui-monospace, monospace; margin: 0 .3rem; }
.p2p-codice span { font-size: .8rem; color: var(--md-on-surface-variant); }
.p2p-area.off { opacity: .45; pointer-events: none; }
.p2p-ok { color: #2e7d32; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.tr-f .tr-q-b { display: block; margin-top: .3rem; }

.ti-hint { font-size: .78rem; color: var(--md-on-surface-variant); margin-top: .3rem; }
#tiIce { font-family: ui-monospace, monospace; font-size: .82rem; }

/* Impostazioni → Outsource: servizi esterni */
.out-titolo { margin: 0 0 .6rem; font-size: 1.05rem; }
.out-riga { padding: .7rem 0; border-top: 1px solid var(--md-outline-variant); }
.out-riga:first-child { border-top: 0; }
.out-nome { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
.out-linea { display: flex; align-items: center; gap: .7rem; }
.out-desc { flex: 1 1 auto; min-width: 0; font-size: .85rem; color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out-btn { flex: 0 0 auto; width: auto; margin: 0; padding: .4rem .9rem; font-size: .82rem; text-decoration: none; white-space: nowrap; }
.out-btn-vuoto { visibility: hidden; }
.out-stato { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; width: 1.6rem; text-align: center; }

/* Metodi di pagamento */
[data-mp][hidden] { display: none !important; }


/* Interruttore nell'intestazione delle finestre: sempre accanto alla ✕, qualunque sia la lunghezza del titolo */
.modal-card header .modal-toggle-attiva { margin-left: auto; margin-right: .6rem; }

/* Attività → Dettagli Utente */
.du-form .du-in[readonly] { background: transparent; border-color: transparent; padding-left: 0; box-shadow: none; }
.du-form.du-edit .du-in { background: var(--md-surface); border-color: var(--md-outline-variant); padding-left: .7rem; }
.du-form textarea.du-in[readonly] { resize: none; }
.du-val { min-height: 2.4rem; display: flex; align-items: center; }
.du-azioni { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }
.du-azioni .du-sx, .du-azioni .du-dx { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.du-azioni button { width: auto; margin: 0; }
.du-azioni .du-del { color: var(--md-error); }
.du-azioni button { padding: .55rem .95rem; font-size: .9rem; }
.du-azioni .du-del { padding-left: .3rem; padding-right: .5rem; }
.du-azioni .du-m { display: none; }
.du-azioni button { white-space: nowrap; }

/* Impostazioni → Genera QR Code accanto alla quota: campo e pulsante sulla stessa riga */
.field .qrgen-wrap { display: flex; align-items: flex-start; gap: .8rem; }
.field .qrgen-main { flex: 1 1 auto; min-width: 0; }
.field .qrgen-row { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; }
.field .qrgen-row .qrgen-campo { flex: 1 1 auto; min-width: 0; margin: 0; }
.field .qrgen-row .qrgen-campo input { width: 100%; }
.field .qrgen-row .btn-secondary { flex: 0 0 auto; margin: 0; }
.field .qrgen-wrap { max-width: none; }

/* Impostazioni → Servizi esterni: righe del riepilogo che portano alla configurazione */
.out-riga[data-sez] { cursor: pointer; border-radius: 10px; }
.out-riga[data-sez]:hover { background: var(--md-surface-variant); }
.srv-sez { scroll-margin-top: .8rem; }
.srv-evid { animation: srvEvid 1.4s ease; }
@keyframes srvEvid { 0% { box-shadow: 0 0 0 3px var(--md-primary); } 100% { box-shadow: 0 0 0 0 transparent; } }
#srvIce { width: 100%; font-family: ui-monospace, monospace; font-size: .82rem; }

/* Impostazioni → Servizi esterni: ogni categoria in una bento grigio chiaro
   (stesso grigio della sidebar), i campi restano chiari per leggibilità */
.imp-panel[data-panel="smtp"] > .kpi-card { background: var(--t-sidebar, #ededed) !important; border: none; border-radius: 16px; box-shadow: none; }
.imp-panel[data-panel="smtp"] > .kpi-card input, .imp-panel[data-panel="smtp"] > .kpi-card select, .imp-panel[data-panel="smtp"] > .kpi-card textarea { background: var(--t-surface, #fff); }
.imp-panel[data-panel="smtp"] > .kpi-card .out-riga { border-top-color: rgba(0,0,0,.08); }
.imp-panel[data-panel="smtp"] > .kpi-card .out-riga[data-sez]:hover { background: rgba(255,255,255,.55); }
.imp-tab-body .imp-panel[data-panel="smtp"] > .kpi-card { padding: 1.1rem 1.3rem !important; }
.imp-panel[data-panel="smtp"] > .kpi-card .btn-secondary { background: var(--t-surface, #fff); }

/* === Panoramica: calendario a bento (variante A) ===
   Ogni giorno è una bento grigio chiaro (stesso grigio della sidebar);
   oggi è chiara con il bordo del colore del tema. */
.dashboard-page .cal-grid { border-bottom: none; gap: .4rem; }
.dashboard-page .cal-row { gap: .4rem; }
.dashboard-page .cal-giorni-header { gap: .4rem; }
.dashboard-page .cal-cell { background: var(--t-sidebar, #ededed); border: none !important; border-radius: 12px; }
.dashboard-page .cal-cell-oggi { background: var(--t-surface, #fff); box-shadow: inset 0 0 0 2px var(--md-primary); }
/* Tema scuro: il verde del tema non si vede su fondo scuro → bordo chiaro, oggi un filo più luminosa */
:root[data-theme="dark"] .dashboard-page .cal-cell-oggi { background: #2a2d2e; box-shadow: inset 0 0 0 2px #9fd3d9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dashboard-page .cal-cell-oggi { background: #2a2d2e; box-shadow: inset 0 0 0 2px #9fd3d9; } }

/* === Calendario: mesi per esteso, grandi come il numero === */
.dashboard-page .cal-num-m { font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--md-on-surface-variant); }
.dashboard-page .cal-num-oggi .cal-num-m { color: var(--md-primary); }

/* === Calendario: eventi sobri, bianchi con bordo grigio sottile (niente colori) ===
   Il tipo resta riconoscibile dall'icona (⏳ da fare, ✔️ fatto, 📝 promemoria). */
.dashboard-page .cal-evt,
.dashboard-page .cal-evt-manuale, .dashboard-page .cal-evt-auto, .dashboard-page .cal-evt-completato, .dashboard-page .cal-evt-promemoria {
    background: var(--t-surface, #fff); border: 1px solid #c9ced2; border-left-width: 1px; border-radius: 6px;
    color: var(--md-on-surface); padding: 2px 6px;
}
.dashboard-page .cal-evt:hover { background: #f3f5f6; }
.dashboard-page .cal-evt-completato { opacity: .6; }
.dashboard-page .cal-evt-piu { background: transparent; border-style: dashed; }
:root[data-theme="dark"] .dashboard-page .cal-evt { border-color: #4a4f52; }
:root[data-theme="dark"] .dashboard-page .cal-evt:hover { background: #2a2d2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dashboard-page .cal-evt { border-color: #4a4f52; } }
/* Tema scuro: il verde scuro del tema non si legge su fondo scuro → verde chiaro
   per la data in alto, il numero di oggi e il suo mese */
:root[data-theme="dark"] .dashboard-page .cal-mese { background: #9fd3d9 !important; color: #0b1d1f !important; }
:root[data-theme="dark"] .dashboard-page .cal-num-oggi .cal-num-d { background: #9fd3d9; color: #0b1d1f; }
:root[data-theme="dark"] .dashboard-page .cal-num-oggi .cal-num-m { color: #9fd3d9; }
/* Tema scuro: bento dei giorni appena più chiare dello sfondo, per distinguerle */
:root[data-theme="dark"] .dashboard-page .cal-cell:not(.cal-cell-oggi) { background: #26292b; }

/* === Panoramica: KPI più evidenti, tinta unica chiara (numeri invariati) === */
.dashboard-page .kpi-row > .kpi-split, .dashboard-page .kpi-row > .kpi-mini {
    background: #eef3f3 !important; border: 1px solid #d6e0e0 !important;
}
:root[data-theme="dark"] .dashboard-page .kpi-row > .kpi-split, :root[data-theme="dark"] .dashboard-page .kpi-row > .kpi-mini {
    background: #22292b !important; border-color: #33403f !important;
}

/* ===== v8.53 ===== */
/* Registro ricevute: ricerca + stampa su una riga, tabella che scorre dentro */
.rv-testa { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; }
.rv-testa .doc-search { flex: 1 1 auto; min-width: 0; }
.rv-testa .btn-secondary { width: auto; flex: 0 0 auto; white-space: nowrap; }
.table-wrap.rv-wrap {
    max-height: min(55vh, 440px); overflow-y: auto; overflow-x: hidden;
    border: 1px solid var(--md-outline-variant); border-radius: 12px;
}
.rv-wrap .rv-tab { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.rv-wrap .rv-tab thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--md-surface-variant, var(--md-surface));
    padding: .5rem .6rem; text-align: left;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: var(--md-on-surface-variant);
}
.rv-wrap .rv-tab td { padding: .4rem .6rem; border-top: 1px solid var(--md-outline-variant); vertical-align: middle; }
.rv-wrap .rv-tab td.col-text { overflow-wrap: anywhere; }
.rv-wrap .rv-n { width: 3.4rem; font-weight: 700; white-space: nowrap; text-align: center !important; }
.rv-wrap .rv-imp { width: 7rem; white-space: nowrap; }
.rv-wrap .rv-data { width: 6.5rem; white-space: nowrap; }
.rv-wrap .rv-az { width: 52px; text-align: center; padding: .25rem !important; }
.rv-wrap .rv-az .btn-icon { width: 36px; height: 36px; }
.rv-wrap tr.rv-annullata td { opacity: .5; }
@media (max-width: 720px) {
    .rv-wrap .rv-imp, .rv-wrap .rv-data { display: none; }
}

/* Newsletter, telefono: dettagli dell'iscritto nella finestra */
.nl-det { display: flex; flex-direction: column; gap: .1rem; }
.nl-det-riga { display: flex; gap: .8rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--md-outline-variant); }
.nl-det-riga:last-child { border-bottom: 0; }
.nl-det-lb { flex: 0 0 5.2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--md-on-surface-variant); }
.nl-det-val { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nl-det-azioni.modal-actions { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: nowrap; }
.nl-det-azioni.modal-actions > button { flex: 1 1 0; min-width: 0; width: auto; padding-left: .4rem; padding-right: .4rem; white-space: nowrap; justify-content: center; }

/* v8.56 · Maratona: etichette e avvisi solo per il telefono (vedi mobile.css) */
.mar-mob, .part-mob-vuoto { display: none; }

/* v8.57 · Metodi di pagamento: icona scelta dall'utente; scorciatoia in Impostazioni */
.anag-ico { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; border-radius: 6px; }
.mp-ico-riga { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mp-ico-anteprima {
    width: 48px; height: 48px; flex: 0 0 auto; border-radius: 10px;
    border: 1px dashed var(--md-outline-variant); display: inline-flex; align-items: center; justify-content: center;
    color: var(--md-on-surface-variant); background: var(--md-surface);
}
.mp-ico-anteprima img { max-width: 40px; max-height: 40px; object-fit: contain; }
.imp-piva-riga { display: flex; gap: .5rem; align-items: center; }
.imp-piva-riga input { flex: 1 1 auto; min-width: 0; }
.imp-piva-riga .btn-secondary { width: auto; flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) {
    .imp-piva-riga { flex-wrap: wrap; }
    .imp-piva-riga .btn-secondary { flex: 1 1 100%; }
}

/* v8.62 · Compensazioni */
.comp-intro { font-size: .85rem; color: var(--md-on-surface-variant); margin: 0 0 .8rem; line-height: 1.45; }
.comp-due { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.comp-due h4 { margin: .5rem 0 .2rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .3px; color: var(--md-on-surface-variant); }
@media (max-width: 720px) { .comp-due { grid-template-columns: 1fr; gap: .4rem; } }

/* v8.64 · Conto dei soci: verifica e attivazione */
.cm-intro { font-size: .86rem; color: var(--md-on-surface-variant); margin: 0 0 .8rem; line-height: 1.45; }
.cm-esito { padding: .6rem .9rem; border-radius: 12px; font-weight: 700; margin-bottom: .8rem; }
.cm-esito.ok { background: color-mix(in srgb, var(--md-primary) 12%, transparent); color: var(--md-primary); }
.cm-esito.ko { background: color-mix(in srgb, var(--md-error) 12%, transparent); color: var(--md-error); }
.cm-tab td:not(.col-text), .cm-tab th:not(.col-text) { text-align: right; white-space: nowrap; width: 1%; }
.cm-tab tr.cm-no td { background: color-mix(in srgb, var(--md-error) 7%, transparent); }
.cm-tab small { color: var(--md-on-surface-variant); font-weight: 400; }
.cm-h { margin: 1rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .3px; color: var(--md-on-surface-variant); }
.cm-mini { font-size: .78rem; color: var(--md-on-surface-variant); margin: .4rem 0 0; }
.cm-note { margin: 0; padding-left: 1.1rem; font-size: .84rem; line-height: 1.45; }
.table-wrap.rv-wrap + .cm-h { margin-top: 1rem; }
.rv-wrap .rv-tab.cm-tab { table-layout: auto; }
.rv-wrap .cm-tab td:not(.col-text), .rv-wrap .cm-tab th:not(.col-text) { width: auto; padding-left: .4rem; padding-right: .6rem; }
.table-wrap.rv-wrap:has(.cm-tab) { max-height: none !important; overflow-x: auto; }
@media (max-width: 720px) { .rv-wrap .cm-tab td, .rv-wrap .cm-tab th { font-size: .8rem; } }
.rv-wrap .cm-tab th { white-space: nowrap; }
.rv-wrap .cm-tab td.col-text { min-width: 8.5rem; overflow-wrap: normal; word-break: normal; hyphens: auto; }
@media (max-width: 720px) { .rv-wrap .cm-tab td:not(.col-text), .rv-wrap .cm-tab th:not(.col-text) { padding-left: .25rem; padding-right: .35rem; } }

/* v8.66 · Pulsante "togli filtri": ✕ bianca su cerchio rosso, solo con filtri attivi */
.filtri-via {
    width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 0; padding: 0;
    background: var(--md-error, #c62828); color: #fff; font-size: .95rem; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.filtri-via:hover { filter: brightness(1.08); }

/* v8.76 · Maratona: iscritti apribili come in corsi e workshop */
.part-row-apribile { cursor: pointer; }
.part-row-apribile:hover { background: color-mix(in srgb, var(--md-primary) 6%, transparent); }