/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — FOGLIO FINALE

   PERCHE' ESISTE
   59 pagine del gestionale portano un proprio blocco <style> nel <head>, per
   un totale di 7.973 righe e 5.583 dichiarazioni che toccano le stesse
   proprieta' governate dal design system (colore 1.061, dimensione 976,
   sfondo 751, spaziature 625, arrotondamenti 420). Quei blocchi stanno DOPO
   il <link> a dashboard-auth.css in tutte e 51 le pagine che li hanno,
   quindi a parita' di specificita' vincono per ordine.

   Questo foglio va caricato PER ULTIMO, dopo i <style> di pagina: cosi' il
   sistema riprende l'ultima parola senza spargere !important nel CSS
   condiviso.

   COSA IMPONE
   Solo cio' su cui il design system deve avere autorita': geometria dei
   comandi, distinzione fra etichetta e azione, pill, intestazioni di
   tabella, contenitori, scala del testo. Tutto il resto resta alle pagine.

   ESCLUSA: "Arena dei Task" (body.page-arena-task), grafica volutamente sua.
   Riferimento: docs/design-system.html
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Scala del testo ───────────────────────────────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) {
  font-size: var(--fs-base);
  line-height: 1.6;
}

/* ── Comandi: due sole misure ──────────────────────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) .btn,
body:not(.page-arena-task):not(.page-whatsapp) .login-link-btn,
body:not(.page-arena-task):not(.page-whatsapp) .az-admin-contact-btn {
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.25;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
body:not(.page-arena-task):not(.page-whatsapp) .btn-sm,
body:not(.page-arena-task):not(.page-whatsapp) .preset-btn,
body:not(.page-arena-task):not(.page-whatsapp) .btn-warning,
body:not(.page-arena-task):not(.page-whatsapp) .page-btn,
body:not(.page-arena-task):not(.page-whatsapp) .header-button,
body:not(.page-arena-task):not(.page-whatsapp) .btn-new-hires,
body:not(.page-arena-task):not(.page-whatsapp) .doc-accept-btn,
body:not(.page-arena-task):not(.page-whatsapp) table td .btn,
body:not(.page-arena-task):not(.page-whatsapp) .table-wrap table td .btn {
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
body:not(.page-arena-task):not(.page-whatsapp) .msg-filter-btn { border-radius: var(--r-pill); }
body:not(.page-arena-task):not(.page-whatsapp) .modal-close-circle-btn,
body:not(.page-arena-task):not(.page-whatsapp) .msg-delete-btn,
body:not(.page-arena-task):not(.page-whatsapp) .task-delete-btn {
  border-radius: var(--r-pill);
  min-height: 0;
}

/* ── Colore dei comandi ────────────────────────────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) .btn-primary,
body:not(.page-arena-task):not(.page-whatsapp) .preset-btn.active,
body:not(.page-arena-task):not(.page-whatsapp) .page-btn.active,
body:not(.page-arena-task):not(.page-whatsapp) .msg-filter-btn.active,
body:not(.page-arena-task):not(.page-whatsapp) .login-button,
body:not(.page-arena-task):not(.page-whatsapp) .wa-send-btn {
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--brand-strong), #fff 12%), var(--brand-strong));
  background-color: var(--brand-strong);
  color: #fff;
  border-color: transparent;
}
body:not(.page-arena-task):not(.page-whatsapp) .btn-secondary,
body:not(.page-arena-task):not(.page-whatsapp) .preset-btn:not(.active),
body:not(.page-arena-task):not(.page-whatsapp) .page-btn:not(.active),
body:not(.page-arena-task):not(.page-whatsapp) .header-button {
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--bg-tertiary), #fff 7%),
    color-mix(in oklab, var(--bg-tertiary), #000 5%));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
body:not(.page-arena-task):not(.page-whatsapp) .btn-danger {
  background: transparent;
  background-image: none;
  color: var(--st-danger);
  border: 1px solid var(--st-danger-bd);
}
body:not(.page-arena-task):not(.page-whatsapp) .btn:focus-visible,
body:not(.page-arena-task):not(.page-whatsapp) .preset-btn:focus-visible,
body:not(.page-arena-task):not(.page-whatsapp) .page-btn:focus-visible,
body:not(.page-arena-task):not(.page-whatsapp) .header-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Solo cio' che si clicca ha un bordo ───────────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) span.pill,
body:not(.page-arena-task):not(.page-whatsapp) span.state-pill,
body:not(.page-arena-task):not(.page-whatsapp) span.status-badge,
body:not(.page-arena-task):not(.page-whatsapp) span.delay-badge,
body:not(.page-arena-task):not(.page-whatsapp) span.az-worker-status-label,
body:not(.page-arena-task):not(.page-whatsapp) span.az-op-status,
body:not(.page-arena-task):not(.page-whatsapp) span.title-count-badge,
body:not(.page-arena-task):not(.page-whatsapp) span.az-count-badge,
body:not(.page-arena-task):not(.page-whatsapp) span[class*="-status-"],
body:not(.page-arena-task):not(.page-whatsapp) span[class*="-badge"] {
  border-color: transparent;
  cursor: default;
  box-shadow: none;
}
/* CORREZIONE: non tutti gli span con "-badge" nel nome sono etichette.
   .az-safee-docs-badge-btn e' uno span CLICCABILE che apre la modale dei
   documenti: la regola qui sopra gli toglieva il bordo e gli metteva il
   cursore da testo. Se si clicca, e' un comando, e il comando ha un bordo. */
body:not(.page-arena-task):not(.page-whatsapp) span[class*="-badge"][class*="-btn"],
body:not(.page-arena-task):not(.page-whatsapp) span[class*="-badge"][role="button"],
body:not(.page-arena-task):not(.page-whatsapp) span[class*="-badge"][tabindex],
body:not(.page-arena-task):not(.page-whatsapp) span[class*="-status-"][class*="-btn"] {
  border-color: currentColor;
  cursor: pointer;
}
body:not(.page-arena-task):not(.page-whatsapp) button.pill,
body:not(.page-arena-task):not(.page-whatsapp) a.pill,
body:not(.page-arena-task):not(.page-whatsapp) button[class*="-badge"] {
  border-color: currentColor;
  cursor: pointer;
}
body:not(.page-arena-task):not(.page-whatsapp) th.sortable-th,
body:not(.page-arena-task):not(.page-whatsapp) th.sortable,
body:not(.page-arena-task):not(.page-whatsapp) th.is-sortable { cursor: pointer; }

/* ── Pill: una misura sola, niente maiuscolo ───────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) .state-pill,
body:not(.page-arena-task):not(.page-whatsapp) .az-worker-status-label,
body:not(.page-arena-task):not(.page-whatsapp) .pill {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.35;
}

/* ── Intestazioni di tabella ───────────────────────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) .company-table th,
body:not(.page-arena-task):not(.page-whatsapp) .data-table th,
body:not(.page-arena-task):not(.page-whatsapp) table.wa-table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px var(--sp-4);
}
body:not(.page-arena-task):not(.page-whatsapp) .company-table td,
body:not(.page-arena-task):not(.page-whatsapp) .data-table td { padding: 9px var(--sp-4); }

/* ── Contenitori: sfumatura, raggio, respiro ───────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) .wa-panel,
body:not(.page-arena-task):not(.page-whatsapp) .wa-kpi-card,
body:not(.page-arena-task):not(.page-whatsapp) .kpi-card,
body:not(.page-arena-task):not(.page-whatsapp) .dash-kpi-card,
body:not(.page-arena-task):not(.page-whatsapp) .data-table-wrapper,
body:not(.page-arena-task):not(.page-whatsapp) .modal-card,
body:not(.page-arena-task):not(.page-whatsapp) .az-source-card {
  background-image: var(--grad-surface);
  border-radius: var(--r-md);
}
body:not(.page-arena-task):not(.page-whatsapp) .wa-panel,
body:not(.page-arena-task):not(.page-whatsapp) .wa-kpi-card { padding: var(--sp-6); }
body:not(.page-arena-task):not(.page-whatsapp) .app-sidebar,
body:not(.page-arena-task):not(.page-whatsapp) .dashboard-head { background-image: var(--grad-surface); }

/* ── Campi e barre filtri ──────────────────────────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) .search-inline-wrap {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  padding: 7px 11px;
  gap: 7px;
}
body:not(.page-arena-task):not(.page-whatsapp) .search-inline-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: var(--sh-focus);
}
body:not(.page-arena-task):not(.page-whatsapp) .wa-filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background-image: var(--grad-raised);
}
body:not(.page-arena-task):not(.page-whatsapp) .wa-filter-row > select,
body:not(.page-arena-task):not(.page-whatsapp) .wa-filter-row > input,
body:not(.page-arena-task):not(.page-whatsapp) .wa-filter-row > label {
  width: auto;
  flex: 0 1 auto;
  margin: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) .wa-filter-row > select { min-width: 190px; }
body:not(.page-arena-task):not(.page-whatsapp) .wa-filter-row > input[type="date"] { min-width: 148px; }
body:not(.page-arena-task):not(.page-whatsapp) .wa-filter-row > label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
}

/* Ogni campo del gestionale ha la scala del sistema, non quella del browser. */
body:not(.page-arena-task):not(.page-whatsapp) input:not([type="checkbox"]):not([type="radio"]),
body:not(.page-arena-task):not(.page-whatsapp) select,
body:not(.page-arena-task):not(.page-whatsapp) textarea {
  font-family: inherit;
  font-size: var(--fs-base);
}

/* ── Titolo di pagina e paginazione ────────────────────────────────────── */
body:not(.page-arena-task):not(.page-whatsapp) .admin-page-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
}
body:not(.page-arena-task):not(.page-whatsapp) .pagination-bar {
  border-top: 1px solid var(--border-color);
  padding: var(--sp-4);
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHIUSURE DALL'AUDIT PAGINA PER PAGINA (56 pagine esaminate)
   ══════════════════════════════════════════════════════════════════════════ */

/* Il contatore accanto al titolo restava a 12px su 22 pagine: la correzione
   stava in amministrativo-pages.css, che non tutte caricano. */
body:not(.page-arena-task):not(.page-whatsapp) .title-count-badge,
body:not(.page-arena-task):not(.page-whatsapp) .az-count-badge {
  font-size: var(--fs-micro);
  padding: 1px 8px;
  font-weight: 700;
}

/* .kpi-card (cruscotto ufficio amministrativo) aveva padding 20px. */
body:not(.page-arena-task):not(.page-whatsapp) .kpi-card,
body:not(.page-arena-task):not(.page-whatsapp) .status-card,
body:not(.page-arena-task):not(.page-whatsapp) .dash-kpi-card {
  padding: var(--sp-6);
}

/* Le intestazioni di tabella: la regola copriva solo due classi su dieci.
   Queste sono tutte quelle realmente usate nel gestionale. */
body:not(.page-arena-task):not(.page-whatsapp) .aging-table th,
body:not(.page-arena-task):not(.page-whatsapp) .permessi-table th,
body:not(.page-arena-task):not(.page-whatsapp) .sales-settings-table th,
body:not(.page-arena-task):not(.page-whatsapp) .preventivi-table th,
body:not(.page-arena-task):not(.page-whatsapp) .catalog-table th,
body:not(.page-arena-task):not(.page-whatsapp) .az-worker-table th,
body:not(.page-arena-task):not(.page-whatsapp) .week-company-table th,
body:not(.page-arena-task):not(.page-whatsapp) .wa-panel table th,
body:not(.page-arena-task):not(.page-whatsapp) .data-table-wrapper table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px var(--sp-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREZIONI DA SEGNALAZIONE DIRETTA — quattro difetti che il mio audit
   automatico non poteva vedere, perche' riguardano elementi generati dal
   JavaScript o differenze fra pagine sullo stesso ruolo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ETICHETTE DI STATO CHE SEMBRANO PULSANTI ─────────────────────────
   .status-badge e .delay-badge erano rettangoli a TINTA PIENA con testo
   bianco e raggio 4px: visivamente sono pulsanti. Diventano pill, come
   tutte le altre etichette di stato del sistema: fondo tenue, testo
   colorato, nessun bordo, nessun cursore a mano. */
body:not(.page-arena-task):not(.page-whatsapp) .status-badge,
body:not(.page-arena-task):not(.page-whatsapp) .delay-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid transparent;
  cursor: default;
  box-shadow: none;
}
/* Esito positivo / chiuso */
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.saldato,
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.prossima-scadenza,
body:not(.page-arena-task):not(.page-whatsapp) .delay-badge.none {
  background: var(--st-ok-bg); color: var(--st-ok);
}
/* Attenzione / in corso */
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.sollecito-1,
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.sollecito-2,
body:not(.page-arena-task):not(.page-whatsapp) .delay-badge.low {
  background: var(--st-warn-bg); color: var(--st-warn);
}
/* Critico */
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.sollecito-3,
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.pratica-legale,
body:not(.page-arena-task):not(.page-whatsapp) .delay-badge.high {
  background: var(--st-danger-bg); color: var(--st-danger);
}
/* Informativo */
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.acconto,
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.riba {
  background: var(--st-info-bg); color: var(--st-info);
}
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.pec {
  background: var(--st-accent-bg); color: var(--st-accent);
}
/* Neutro */
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.non-scaduto,
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.importato,
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.altro,
body:not(.page-arena-task):not(.page-whatsapp) .status-badge.none {
  background: var(--st-neutral-bg); color: var(--st-neutral);
}

/* ── 2. PULSANTI DI SCARICO DOCUMENTO ────────────────────────────────────
   Erano 34x34 con un verde tutto loro (#10b981), un'ombra larga 10px e
   raggio 10: non somigliavano a nessun altro comando. Ora sono pulsanti
   icona del sistema: 32x32, verde di marca, ombra contenuta. */
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-doc-download-btn,
body:not(.page-arena-task):not(.page-whatsapp) .az-verbale-art36-btn,
body:not(.page-arena-task):not(.page-whatsapp) .az-incarico-gea-btn,
body:not(.page-arena-task):not(.page-whatsapp) .az-incarico-ps-btn,
body:not(.page-arena-task):not(.page-whatsapp) .az-incarico-preposto-btn,
body:not(.page-arena-task):not(.page-whatsapp) .az-incarico-rls-btn,
body:not(.page-arena-task):not(.page-whatsapp) .az-incarico-rspp-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: var(--r-sm);
  background: var(--brand-strong);
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--brand-strong), #fff 12%), var(--brand-strong));
  border: 1px solid transparent;
  color: #fff;
  box-shadow: none;
}
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-doc-download-btn:hover {
  transform: none;
  box-shadow: var(--sh-1);
  filter: brightness(1.06);
}
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-doc-download-btn i { font-size: var(--fs-md); }

/* ── 3. GRASSETTO EXTRA ──────────────────────────────────────────────────
   Otto punti usavano peso 800 mentre la scala del sistema si ferma a 700.
   Da qui la sensazione di nomi azienda "piu' grassi" su alcune pagine. */
body:not(.page-arena-task):not(.page-whatsapp) .dash-kpi-value,
body:not(.page-arena-task):not(.page-whatsapp) .dash-kpi-total-open,
body:not(.page-arena-task):not(.page-whatsapp) .dash-kpi-total-closed,
body:not(.page-arena-task):not(.page-whatsapp) .doc-variation-title,
body:not(.page-arena-task):not(.page-whatsapp) .doc-total-value,
body:not(.page-arena-task):not(.page-whatsapp) .task-top-type-text--new-hire,
body:not(.page-arena-task):not(.page-whatsapp) .msg-task-feedback-prompt-title,
body:not(.page-arena-task):not(.page-whatsapp) .pr-dash-title,
body:not(.page-arena-task):not(.page-whatsapp) .wa-kpi-value,
body:not(.page-arena-task):not(.page-whatsapp) .kpi-value {
  font-weight: 700;
}

/* ── 4. MODALI CON PADDING DIVERSI ───────────────────────────────────────
   .modal-content rendeva con quattro spaziature diverse a seconda della
   pagina: 14px, 16/18, 20px. AGENTS.md fissa 14px come padding standard
   delle modali, ed e' quello. */
body:not(.page-arena-task):not(.page-whatsapp) .modal-content {
  padding: var(--sp-6);
}
body:not(.page-arena-task):not(.page-whatsapp) .modal-head {
  padding: var(--sp-5) var(--sp-6);
}

/* ══════════════════════════════════════════════════════════════════════════
   LINK INTERNI (schede azienda, elenchi, messaggi)
   Usavano var(--brand) #00a884: su fondo bianco misura 3,03:1, sotto la
   soglia di leggibilita' per il testo. E' esattamente il caso per cui esiste
   --brand-strong, che porta a 5,28:1. In tema scuro il valore non cambia,
   perche' li' il verde chiaro era gia' conforme.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .erp-brand-link,
body:not(.page-arena-task):not(.page-whatsapp) .erp-company-link,
body:not(.page-arena-task):not(.page-whatsapp) .preventivi-erp-link,
body:not(.page-arena-task):not(.page-whatsapp) .msg-company-link {
  color: var(--brand-strong);
}

/* ══════════════════════════════════════════════════════════════════════════
   APPLICAZIONE DEL DESIGN SYSTEM — quattro punti che il sistema decide gia'.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. LINK INTERNI — peso 600, non 700.
   Sezione 4: 700 e' riservato a titoli e azioni. Un link dentro una cella e'
   testo corrente. Colore e sottolineatura al passaggio bastano a dire che e'
   cliccabile; il grassetto pieno e' un terzo segnale che non serve, e su
   ragioni sociali gia' maiuscole raddoppia il peso della pagina. */
body:not(.page-arena-task):not(.page-whatsapp) .erp-brand-link,
body:not(.page-arena-task):not(.page-whatsapp) .erp-company-link,
body:not(.page-arena-task):not(.page-whatsapp) .preventivi-erp-link,
body:not(.page-arena-task):not(.page-whatsapp) .msg-company-link {
  color: var(--brand-strong);
  font-weight: 600;
}

/* 2. STATO "IN CORSO" — colore di stato, non di sorgente.
   Sezione 3, regola delle tre famiglie: il viola e' Didattiko, cioe' una
   PROVENIENZA. "In corso" e' una CONDIZIONE, e le condizioni usano la
   famiglia stato. Accanto a "Completato" (verde di stato) il viola faceva
   convivere due famiglie sullo stesso oggetto. */
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-status-badge--running {
  background: var(--st-info-bg);
  color: var(--st-info);
  border-color: transparent;
}

/* 3. AZIONI DISTRUTTIVE — a contorno, mai a tinta piena.
   Sezione 10: "il pericolo e' a contorno, non pieno, perche' un pulsante
   rosso pieno in una tabella densa grida piu' di quanto meriti". */
body:not(.page-arena-task):not(.page-whatsapp) .btn-danger,
body:not(.page-arena-task):not(.page-whatsapp) .pc-btn-danger-outline {
  background: transparent;
  background-image: none;
  color: var(--st-danger);
  border: 1px solid var(--st-danger-bd);
}
body:not(.page-arena-task):not(.page-whatsapp) .btn-danger:hover:not(:disabled) {
  background: var(--st-danger-bg);
}

/* 4. CONTATORI A ZERO — nessun colore.
   Sezione 18: "niente colore pieno su elementi inattivi". Zero rifiuti non
   e' un allarme, e zero conferme non e' un esito positivo: sono assenze. */
body:not(.page-arena-task):not(.page-whatsapp) .pc-participant-chip--zero {
  background: var(--st-neutral-bg) !important;
  color: var(--st-neutral) !important;
  border-color: transparent !important;
  opacity: 0.75;
}

/* ══════════════════════════════════════════════════════════════════════════
   REGOLE STRUTTURALI — non per nome di pagina.

   L'errore precedente: avevo scritto le regole nominando le classi di
   Scadenze (.scadenze-page, .data-table-wrapper). Fatture usa .table-wrap +
   .company-table e restava fuori, insieme a tutte le altre. Qui si descrive
   la STRUTTURA — una tabella dentro un contenitore — non la pagina.
   ══════════════════════════════════════════════════════════════════════════ */

/* Ogni tabella incassata in un contenitore e' un pannello, ovunque si trovi. */
body:not(.page-arena-task):not(.page-whatsapp) .table-wrap:has(table):not(:has(> [class*="-box-list"])):not(:has(> [class*="-card-list"])):not(:has(> [class*="-accordion"])),
body:not(.page-arena-task):not(.page-whatsapp) .data-table-wrapper,
body:not(.page-arena-task):not(.page-whatsapp) .scadenze-container:has(table),
body:not(.page-arena-task):not(.page-whatsapp) .doc-table-wrap:has(table) {
  background-image: var(--grad-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  /* auto e non hidden: ritaglia gli angoli come hidden, ma lascia scorrere
     la tabella quando e' piu' larga del contenitore. Con hidden le colonne
     di destra — i pulsanti — venivano tagliate senza barra per raggiungerle. */
  overflow: auto;
  /* Nessuna imbottitura: chi porta la cornice deve lasciare che il fondo
     dell'intestazione arrivi fino al bordo. Con anche solo 4px di lato
     restava una fessura chiara a sinistra e a destra della testata. */
  padding: 0;
}
/* Se il contenitore e' gia' dentro un pannello, non raddoppiare la cornice:
   due bordi accostati lasciano una riga chiara ai lati dell'intestazione.
   !important perche' la regola che disegna la cornice ha specificita' alta
   per via delle sue guardie :not(:has(...)) e vincerebbe comunque. */
body:not(.page-arena-task):not(.page-whatsapp) :is(.wa-panel, .panel, .modal-card, .didattiko-monitoring-panel, .detail-card) :is(.table-wrap, [class$="-table-wrap"], [class$="-table-wrapper"]) {
  border: 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
}

/* Intestazioni: qualunque tabella dentro un contenitore, non solo due classi. */
body:not(.page-arena-task):not(.page-whatsapp) .table-wrap table th,
body:not(.page-arena-task):not(.page-whatsapp) .data-table-wrapper table th,
body:not(.page-arena-task):not(.page-whatsapp) .scadenze-container table th,
body:not(.page-arena-task):not(.page-whatsapp) .doc-table-wrap table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px var(--sp-4);
  border-bottom: 1px solid var(--border-color);
}
body:not(.page-arena-task):not(.page-whatsapp) .table-wrap table td,
body:not(.page-arena-task):not(.page-whatsapp) .data-table-wrapper table td,
body:not(.page-arena-task):not(.page-whatsapp) .scadenze-container table td {
  padding: 9px var(--sp-4);
}

/* La paginazione appartiene al pannello della tabella. */
body:not(.page-arena-task):not(.page-whatsapp) .table-wrap + .pagination-bar,
body:not(.page-arena-task):not(.page-whatsapp) .data-table-wrapper .pagination-bar {
  border-top: 1px solid var(--border-color);
  background: transparent;
  padding: var(--sp-4);
}

/* ── Stili in linea sui pulsanti ─────────────────────────────────────────
   Nel JavaScript ci sono 266 attributi style= che riscrivono colore,
   dimensione e spaziature. Uno stile in linea batte qualsiasi foglio, TRANNE
   una dichiarazione !important. Qui la geometria dei comandi la impone il
   sistema, comunque venga generato il markup. */
body:not(.page-arena-task):not(.page-whatsapp) .btn,
body:not(.page-arena-task):not(.page-whatsapp) a.btn {
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .btn-sm,
body:not(.page-arena-task):not(.page-whatsapp) a.btn-sm {
  min-height: 28px !important;
  min-width: 0 !important;
  padding: 6px 11px !important;
  font-size: var(--fs-sm) !important;
}
/* Pulsante icona: quadrato, non rettangolo schiacciato. */
body:not(.page-arena-task):not(.page-whatsapp) .btn--icon,
body:not(.page-arena-task):not(.page-whatsapp) .btn.btn--icon.btn-sm {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}

/* .btn-success non esiste nel sistema: e' il primario. */
body:not(.page-arena-task):not(.page-whatsapp) .btn-success {
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--brand-strong), #fff 12%), var(--brand-strong)) !important;
  background-color: var(--brand-strong) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHIUSURE DALL'AUDIT COMPLETO (56 pagine)
   ══════════════════════════════════════════════════════════════════════════ */

/* Contenitori di tabella: forma generica, cosi' copre anche i nomi futuri.
   .aging-table-wrapper era rimasto fuori perche' lo nominavo a mano. */
body:not(.page-arena-task):not(.page-whatsapp) [class$="-table-wrapper"]:has(table),
body:not(.page-arena-task):not(.page-whatsapp) [class$="-table-wrap"]:has(table) {
  background-image: var(--grad-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  /* auto e non hidden: ritaglia gli angoli come hidden, ma lascia scorrere
     la tabella quando e' piu' larga del contenitore. Con hidden le colonne
     di destra — i pulsanti — venivano tagliate senza barra per raggiungerle. */
  overflow: auto;
  /* Nessuna imbottitura: chi porta la cornice deve lasciare che il fondo
     dell'intestazione arrivi fino al bordo. Con anche solo 4px di lato
     restava una fessura chiara a sinistra e a destra della testata. */
  padding: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) [class$="-table-wrapper"] table th,
body:not(.page-arena-task):not(.page-whatsapp) [class$="-table-wrap"] table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px var(--sp-4);
  border-bottom: 1px solid var(--border-color);
}
body:not(.page-arena-task):not(.page-whatsapp) .wa-panel [class$="-table-wrapper"],
body:not(.page-arena-task):not(.page-whatsapp) .panel [class$="-table-wrapper"] {
  border: 0; border-radius: 0; background-image: none;
}

/* Quattro pulsanti che non erano mai stati stilizzati: rendevano con il
   corpo di sistema del browser (13,33px), peso 400 e nessun arrotondamento. */
body:not(.page-arena-task):not(.page-whatsapp) .btn-dettagli {
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-image: var(--grad-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
}
body:not(.page-arena-task):not(.page-whatsapp) .wa-compose-icon-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Raggio 50px non e' in scala: o e' una pillola o e' 8px. Qui e' un comando
   circolare di invio, quindi pillola piena. */
body:not(.page-arena-task):not(.page-whatsapp) .wa-send-btn {
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: 600;
  min-height: 32px;
}

/* Filtro di stato: l'attivo era piu' alto dell'inattivo (6px contro 3px). */
body:not(.page-arena-task):not(.page-whatsapp) .status-filter-btn,
body:not(.page-arena-task):not(.page-whatsapp) .status-filter-btn.active {
  padding: 3px 10px;
  font-size: var(--fs-micro);
  font-weight: 600;
  min-height: 0;
}

/* Ultimi due selettori di vista (corsi asincroni e pool): erano a 7px 12px. */
body:not(.page-arena-task):not(.page-whatsapp) .ca-view-btn,
body:not(.page-arena-task):not(.page-whatsapp) .pf-view-btn {
  padding: 6px 11px;
  font-size: var(--fs-sm);
  font-weight: 600;
  min-height: 28px;
  border-radius: var(--r-sm);
}

/* ══════════════════════════════════════════════════════════════════════════
   INDICATORI DI ORDINAMENTO
   Il design system usa triangoli disegnati (SVG), sempre della stessa forma.
   L'app usava il carattere Unicode "arrow up down" a opacita' 0,45 e una
   Font Awesome a 10px con opacita' 0,4: entrambi piu' sottili e piu' pallidi.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .company-table th.sortable::after,
body:not(.page-arena-task):not(.page-whatsapp) .data-table th.sortable::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -5px;
  width: 8px;
  height: 10px;
  opacity: 0.45;
  background: currentColor;
  -webkit-mask: var(--sort-mask) center / 8px 10px no-repeat;
  mask: var(--sort-mask) center / 8px 10px no-repeat;
  --sort-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 0L7 4H1z'/%3E%3Cpath d='M4 10L1 6h6z'/%3E%3C/svg%3E");
}
body:not(.page-arena-task):not(.page-whatsapp) .company-table th.sortable[data-sort-dir="asc"]::after,
body:not(.page-arena-task):not(.page-whatsapp) .data-table th.sortable[data-sort-dir="asc"]::after {
  opacity: 1;
  color: var(--brand-strong);
  --sort-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 1L7 6H1z'/%3E%3C/svg%3E");
}
body:not(.page-arena-task):not(.page-whatsapp) .company-table th.sortable[data-sort-dir="desc"]::after,
body:not(.page-arena-task):not(.page-whatsapp) .data-table th.sortable[data-sort-dir="desc"]::after {
  opacity: 1;
  color: var(--brand-strong);
  --sort-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 9L1 4h6z'/%3E%3C/svg%3E");
}
/* L'altro meccanismo: icona Font Awesome dentro un <span class="sort-icon">.
   Le frecce ci sono gia', erano solo troppo piccole e troppo pallide. */
body:not(.page-arena-task):not(.page-whatsapp) .sort-icon {
  font-size: var(--fs-micro);
  opacity: 0.55;
  margin-left: 5px;
}
body:not(.page-arena-task):not(.page-whatsapp) .sortable-th.sort-asc .sort-icon,
body:not(.page-arena-task):not(.page-whatsapp) .sortable-th.sort-desc .sort-icon {
  opacity: 1;
  color: var(--brand-strong);
}

/* ══════════════════════════════════════════════════════════════════════════
   SEGNALI DI STATO DELL'AZIENDA (sintesi DVR, piu' sedi, portale cliente)
   Erano tre colori scritti a mano — verde Safe, ambra ERP, blu CRM — cioe'
   la famiglia PROVENIENZA usata per dire tre STATI. Ora un colore solo in un
   cerchietto neutro: la differenza la fa l'icona, non la tinta.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .company-dvr-summary-ok,
body:not(.page-arena-task):not(.page-whatsapp) .company-multi-office-ok,
body:not(.page-arena-task):not(.page-whatsapp) .company-client-portal-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--st-neutral-bg);
  color: var(--text-secondary);
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREZIONE: le icone nel cerchietto erano grigie SU grigio, e sembravano
   spente. Il cerchietto resta neutro, l'icona torna al colore del testo.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .company-dvr-summary-ok,
body:not(.page-arena-task):not(.page-whatsapp) .company-multi-office-ok,
body:not(.page-arena-task):not(.page-whatsapp) .company-client-portal-ok {
  color: var(--text-primary);
  background: var(--st-neutral-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   ICONE DEL TITOLO DI PAGINA
   Cinque pagine della formazione coloravano l'icona del titolo di viola
   (#7c3aed, cioe' il colore-sorgente di Didattiko) e quattro no, ognuna con
   una classe propria. Sezione 9 del design system: "il colore eredita dal
   testo; un'icona non porta mai un colore che l'etichetta accanto non ha".
   Cosi' tutte le pagine si comportano allo stesso modo, e l'icona resta
   luminosa quanto il titolo.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .pc-title-icon,
body:not(.page-arena-task):not(.page-whatsapp) .ca-title-icon,
body:not(.page-arena-task):not(.page-whatsapp) .pf-title-icon,
body:not(.page-arena-task):not(.page-whatsapp) .mf-title-icon,
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-title-icon,
body:not(.page-arena-task):not(.page-whatsapp) .admin-page-title > i,
body:not(.page-arena-task):not(.page-whatsapp) .toolbar-title > i {
  color: inherit;
}
/* Le icone-accordion e le note seguono il testo che accompagnano. */
body:not(.page-arena-task):not(.page-whatsapp) .pc-accordion-icon,
body:not(.page-arena-task):not(.page-whatsapp) .pc-edition-notes-icon {
  color: var(--text-secondary);
}
/* Eccezione prevista dal sistema: l'icona che dichiara una PROVENIENZA
   conserva il colore della sua sorgente. */
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-erp-icon--linked {
  color: var(--st-ok);
}
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-erp-icon--missing {
  color: var(--text-secondary);
}
body:not(.page-arena-task):not(.page-whatsapp) .formazione-moodle-icon,
body:not(.page-arena-task):not(.page-whatsapp) .lavoratori-moodle-icon {
  color: var(--src-didattiko-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   TOKEN FANTASMA — 23 variabili usate con var() ma MAI definite.
   Ogni var(--accent, #2563eb) rendeva sempre col ripiego: colori scritti a
   mano che entravano nell'interfaccia senza passare dal sistema. Definendoli
   come alias dei token veri, tutti gli usi esistenti rientrano d'un colpo,
   senza toccare una riga dei file che li usano.
   ══════════════════════════════════════════════════════════════════════════ */
:root,
body:not(.page-arena-task):not(.page-whatsapp) {
  --accent: var(--brand-strong);
  --accent-color: var(--brand-strong);
  --fb-color: var(--st-info);
  --card-bg: var(--bg-secondary);
  --surface-2: var(--bg-tertiary);
  --success-color: var(--st-ok);
  --danger-color: var(--st-danger);
  --warning-color: var(--st-warn);
  --color-warning: var(--st-warn);
  --color-danger: var(--st-danger);
  --color-success: var(--st-ok);
  --text-muted: var(--text-secondary);
  --muted: var(--text-secondary);
  --border: var(--border-color);
}

body:not(.page-arena-task):not(.page-whatsapp) .btn-assign-pool-hero:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: none !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .btn-assign-pool-hero:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRE FILTRI — un modello solo per tutta l'app.
   Su dieci barre filtri reali, solo due avevano una cornice (Scadenze e
   l'anteprima); le altre otto non avevano ne' sfondo, ne' bordo, ne' raggio,
   ne' spaziatura interna: i campi galleggiavano sulla pagina. Una (.diff-
   filters) impilava per giunta i campi in colonna.
   Qui la cornice diventa una sola, quella di Scadenze.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .wa-filter-row, .filters, .filters-row, .status-filter-bar, .acc-lt-cal-filter,
  .diff-filters, .dash-filter-card, .didattiko-delivery-filters, .rf-filters-bar,
  .pc-editions-filters, .pr-filters, .mf-filters-bar, .pf-summary-filters,
  .period-filter-bar) {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  background-image: var(--grad-raised);
}

/* Una barra dentro un'altra barra non si incornicia due volte: in Ufficio
   amministrativo e in Account questi contenitori sono annidati fino a
   quattro livelli. Vale la cornice piu' esterna, le interne diventano
   semplici gruppi in linea. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .wa-filter-row, .filters, .filters-row, .status-filter-bar, .acc-lt-cal-filter,
  .diff-filters, .dash-filter-card, .didattiko-delivery-filters, .rf-filters-bar,
  .pc-editions-filters, .pr-filters, .mf-filters-bar, .pf-summary-filters,
  .period-filter-bar) :is(
  .wa-filter-row, .filters, .filters-row, .status-filter-bar, .acc-lt-cal-filter,
  .diff-filters, .dash-filter-card, .didattiko-delivery-filters, .rf-filters-bar,
  .pc-editions-filters, .pr-filters, .mf-filters-bar, .pf-summary-filters,
  .period-filter-bar) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-image: none;
  background-color: transparent;
}

/* I raggruppamenti interni (etichetta + campo) restano in linea. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .filter-row, .filter-dates-row, .filter-group, .date-filter-group, .date-filter-item) {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.filter-group, .date-filter-item) > label {
  margin: 0;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* I campi non si allargano a tutta riga: si dispongono uno accanto all'altro. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .wa-filter-row, .filters, .filters-row, .status-filter-bar, .acc-lt-cal-filter,
  .diff-filters, .dash-filter-card, .didattiko-delivery-filters, .rf-filters-bar,
  .pc-editions-filters, .pr-filters, .mf-filters-bar, .pf-summary-filters,
  .period-filter-bar) :is(select, input, label, button) {
  width: auto;
  flex: 0 1 auto;
  margin: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .filters, .filters-row, .status-filter-bar, .acc-lt-cal-filter, .diff-filters,
  .dash-filter-card, .didattiko-delivery-filters, .rf-filters-bar,
  .pc-editions-filters, .pr-filters, .mf-filters-bar, .pf-summary-filters,
  .period-filter-bar) > select { min-width: 190px; }
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .filters, .filters-row, .status-filter-bar, .acc-lt-cal-filter, .diff-filters,
  .dash-filter-card, .didattiko-delivery-filters, .rf-filters-bar,
  .pc-editions-filters, .pr-filters, .mf-filters-bar, .pf-summary-filters,
  .period-filter-bar) input[type="date"] { min-width: 148px; }

/* ══════════════════════════════════════════════════════════════════════════
   PASTIGLIE ICONA ACCANTO ALLA RAGIONE SOCIALE
   Stessa forma per tutte: cerchietto grigio, bordo grigio piu' scuro di 1px.
   Cambia solo l'icona dentro — verde per i segnali dell'azienda, viola per
   il collegamento a Didattiko, che e' il colore-sorgente di quel sistema.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .company-dvr-summary-ok, .company-multi-office-ok, .company-client-portal-ok,
  .didattiko-erp-icon, .didattiko-erp-icon--linked) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--st-neutral-bg);
  border: 1px solid color-mix(in oklab, var(--border-color), var(--text-secondary) 40%);
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .company-dvr-summary-ok, .company-multi-office-ok, .company-client-portal-ok) {
  color: var(--brand-strong);
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.didattiko-erp-icon, .didattiko-erp-icon--linked) {
  color: var(--src-didattiko-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALI — una sola testata, un solo piede, una sola carta.
   Il modello base (.modal-card / .modal-head / .modal-foot) era gia' corretto,
   ma molte pagine usano varianti proprie: .pc-session-modal-head,
   .az-quote-modal-head, .referti-modal-panel, .acc-lt-modal-card... e due
   nomi orfani (.modal-header, .modal-actions) che nel foglio base non hanno
   NESSUNA regola: rendevano senza bordo e senza spaziatura.
   Qui le regole non nominano le pagine: descrivono il RUOLO. Qualunque
   classe contenga "modal-card", "modal-head" o "modal-foot" riceve lo stesso
   trattamento. La larghezza resta quella che ogni modale si e' scelta.
   ══════════════════════════════════════════════════════════════════════════ */

/* La carta: superficie, bordo e raggio del sistema. Mai la larghezza. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="modal-card"], [class*="modal-panel"], .profile-photo-crop-modal) {
  background: var(--grad-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

/* La testata: sempre alta uguale, sempre con la riga che la separa. */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-head"], [class*="modal-header"]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-color);
  background: transparent;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-head"], [class*="modal-header"])
  :is(h2, h3, h4, .modal-title) {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Il piede: comandi a destra, riga di separazione sopra.
   .modal-actions e' il piede di sette modali e non aveva alcuna regola. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="modal-foot"], [class*="modal-footer"], .modal-actions, .modal-buttons) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-color);
  background: transparent;
}

/* Il corpo non porta uno sfondo proprio: la superficie e' quella della carta,
   altrimenti si vede la cucitura fra corpo e cornice. */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  > .modal-content {
  background: transparent;
  padding: var(--sp-5);
}

/* ══════════════════════════════════════════════════════════════════════════
   ICONE-COLLEGAMENTO A DIDATTIKO NELLE TABELLE
   In Lavoratori, Formazione e Azienda l'icona del collegamento era una
   lettera viola nuda in mezzo al testo. Prende la stessa pastiglia delle
   icone dell'azienda — cerchietto grigio, bordo grigio piu' scuro — e
   dentro il viola di Didattiko, che qui e' un colore-SORGENTE: dice da
   quale sistema arriva il dato, non "attenzione".
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .lavoratori-moodle-icon, .formazione-moodle-icon, .az-worker-moodle-icon,
  .didattiko-erp-icon, .didattiko-erp-icon--linked) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--st-neutral-bg);
  border: 1px solid color-mix(in oklab, var(--border-color), var(--text-secondary) 40%);
  color: var(--src-didattiko-ink);
  font-size: 11px;
  line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
/* L'assenza di collegamento non e' una sorgente: resta neutra e spenta. */
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-erp-icon--missing {
  color: var(--text-secondary);
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROTEZIONE: <strong> dentro un link gia' in grassetto.
   In Didattiko corsi il nome azienda era <a>(700) > <strong>. "bolder" e' un
   peso RELATIVO: su 700 calcola 900. Da qui l'extrabold che non compariva in
   nessun'altra pagina. Dentro un link il grassetto non si somma.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) a :is(strong, b) {
  font-weight: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════
   DIDATTIKO CORSI — sincrono/asincrono non e' una SORGENTE.
   Il bordo dei corsi sincroni era #2563eb, blu: lo stesso canale con cui
   l'app dice "questo dato viene dal CRM" (--src-crm #0075c3). Ma in questa
   pagina TUTTI i corsi vengono da Didattiko: la modalita' di erogazione e'
   una proprieta' del dato, non la sua provenienza.
   Quindi il colore resta il viola Didattiko per entrambi, e la differenza
   sincrono/asincrono la fa il TRATTO — continuo o tratteggiato — che non
   ruba il significato a nessuna sorgente.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-course-item--sync {
  border-top-color: var(--src-didattiko) !important;
  border-top-style: dashed !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-delivery-filter[data-delivery="synchronous"] {
  border-color: color-mix(in oklab, var(--src-didattiko), transparent 55%) !important;
  border-style: dashed !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .didattiko-delivery-filter[data-delivery="synchronous"].is-active {
  border-color: var(--src-didattiko) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   IL BLU TORNA A SIGNIFICARE UNA COSA SOLA
   Regola, dettata dall'uso reale dell'app: il BORDO dice la provenienza,
   il RIEMPIMENTO dice lo stato. Cosi' il blu puo' restare il colore
   informativo dentro una pastiglia senza mai fingersi "dato dal CRM".
   Non ho cambiato --st-info: misurando le alternative in OKLab, ogni tinta
   libera collideva con un token esistente (ardesia col neutro a 0.095,
   indaco con l'accento a 0.063, ciano col CRM a 0.081). La tavolozza e'
   satura: la separazione va fatta per canale, non per tinta.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. Selezione, stato attivo, fuoco, passaggio del mouse ───────────────
   Non e' provenienza ne' stato: e' "stai agendo qui". Colore d'azione. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .az-header-access-btn, .az-header-access-btn:hover,
  .dash-compliance-metric:hover, .dash-compliance-kpi-link:hover,
  .incassi-item:hover, .incassi-item.active, .incassi-company-card.is-selected,
  .fcp-field-input:focus, .rc-day-btn.rc-selected, .rc-time-btn.rc-selected,
  .task-author-feedback-opt:hover, .task-author-feedback-opt.is-selected,
  .task-author-feedback-confirm.has-choice:not(:disabled),
  .msg-attach-download:hover) {
  border-color: var(--brand-strong) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .az-header-access-btn {
  background-color: var(--brand-strong) !important;
  background-image: none !important;
  color: #fff !important;
}

/* ── B. Avanzamento: e' una SCALA, non cinque significati diversi ─────────
   Erano cinque blu (#bae6fd -> #2563eb) che imitavano una sorgente. Una
   progressione si legge meglio per intensita' dello stesso colore. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .dash-op-roadmap-item.step-1 .dash-op-roadmap-count,
  .az-op-status.az-op-step-1) {
  border-color: color-mix(in oklab, var(--brand-strong), transparent 78%) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .dash-op-roadmap-item.step-2 .dash-op-roadmap-count,
  .az-op-status.az-op-step-2) {
  border-color: color-mix(in oklab, var(--brand-strong), transparent 62%) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .dash-op-roadmap-item.step-3 .dash-op-roadmap-count,
  .az-op-status.az-op-step-3) {
  border-color: color-mix(in oklab, var(--brand-strong), transparent 46%) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .dash-op-roadmap-item.step-4 .dash-op-roadmap-count,
  .az-op-status.az-op-step-4) {
  border-color: color-mix(in oklab, var(--brand-strong), transparent 26%) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .dash-op-roadmap-item.step-5 .dash-op-roadmap-count,
  .az-op-status.az-op-step-5) {
  border-color: var(--brand-strong) !important;
}

/* ── C. Provenienza vera: il bordo dice da dove arriva il dato ────────────
   Due casi erano proprio invertiti: i referti presenti su Safe' avevano il
   bordo BLU, cioe' il colore del CRM, per dire "arriva da Safe'". */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .referti-prior-upload.is-safee-present, .dup-chip.dup-safee) {
  border-color: var(--src-safee) !important;
}
/* Portale cliente e nuovo assunto sono concetti LOCALI dell'ERP. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .msg-card--client, .msg-badge--client, .msg-badge--client-sender,
  .msg-from--client, .msg-card--sent, .msg-direction-icon--sent,
  .msg-badge--new-hire, .task-top--new-hire,
  .task-top--new-hire .task-age-label--open,
  .task-top--new-hire .task-age-label--closed,
  .task-top--new-hire .task-closed-check) {
  border-color: color-mix(in oklab, var(--src-erp), transparent 45%) !important;
}

/* ── D. Stato: il bordo si spegne, il significato resta nel riempimento ───
   Queste sono pastiglie di stato. Il loro sfondo colorato basta a dirlo;
   il bordo colorato in piu' le faceva sembrare marcate per provenienza. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .sync-status-badge.running, .az-call-notes-save-status--saving,
  .state-pill--enrolled, .pc-month-event-chip.status-planning,
  .pc-participant-chip--invited, .pc-delivery-badge--presenza,
  .pc-invite-sent-badge, .doc-status-in-lavorazione, .az-draft-notice--info,
  .az-estratto-summary--credit, .erp-page-help-tips, .msg-upload-status,
  .az-op-status--progress, .status-card--altro, .status-card--riba,
  .msg-badge--task-open, .recipient-tag--office) {
  border-color: var(--border-color) !important;
}

/* ── I pulsanti documento avevano un bordo blu petrolio tutto loro ───────── */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .az-verbale-art36-btn, .az-incarico-gea-btn, .az-incarico-ps-btn,
  .az-incarico-preposto-btn, .az-incarico-rls-btn, .az-incarico-rspp-btn) {
  border-color: color-mix(in oklab, var(--brand-strong), transparent 55%) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SERENA — quinta sorgente, provvisoria.
   Si era presa un azzurro #0ea5e9 che confinava col blu del CRM: due
   sorgenti diverse con lo stesso segnale. Le assegno una tinta propria,
   cercata scandendo tutto lo spazio colore e massimizzando la distanza
   minima da tutto cio' che era gia' impegnato, dentro la fascia di
   luminosita' e croma delle altre quattro sorgenti:
       #c24a88 — 329 gradi, croma 0.166, contrasto 4.54:1
       distanze: CRM 0.250 · Safe' 0.327 · Didattiko 0.138 · ERP 0.164
   Il TRATTEGGIO dice che e' provvisoria: stessa grammatica dei corsi
   sincroni, un qualificatore che non consuma una seconda tinta. Quando
   Serena diventera' stabile bastera' togliere border-style.
   ══════════════════════════════════════════════════════════════════════════ */
:root, body:not(.page-arena-task):not(.page-whatsapp) {
  --src-serena: #c24a88;
  --src-serena-bg: rgba(194, 74, 136, 0.14);
}
:root[data-theme="dark"], body.dark-theme:not(.page-arena-task) {
  --src-serena: #c95f96;
  --src-serena-bg: rgba(201, 95, 150, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --src-serena: #c95f96;
    --src-serena-bg: rgba(201, 95, 150, 0.18);
  }
}

body:not(.page-arena-task):not(.page-whatsapp) .sync-label.serena,
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .company-referent-card--serena.is-complete,
  .company-referent-card--serena.is-partial,
  .company-referent-card--serena.is-empty) {
  border-color: var(--src-serena) !important;
  border-style: dashed !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .company-referent-card--serena .company-referent-channel-dot.is-on {
  border-color: var(--src-serena) !important;
  border-style: dashed !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .company-referent-card--serena .company-referent-channel-dot.is-on
  .company-referent-channel:not(.fa-whatsapp) {
  color: var(--src-serena) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATO A FUOCO — uno solo per tutta l'app.
   Ne esistevano 34 versioni diverse: sedici campi cambiavano solo il colore
   del bordo senza alcun alone, altri avevano aloni a 0.15, 0.18, 0.22, 0.24
   di opacita', altri ancora un contorno viola o blu. Il token giusto c'era
   gia' nel foglio base — --sh-focus — ed era usato due volte in tutta l'app.
   Il fuoco e' AZIONE, non provenienza: e' sempre il colore di marca, anche
   nei moduli della formazione che lo coloravano di viola Didattiko.
   ══════════════════════════════════════════════════════════════════════════ */

/* I campi: bordo di marca piu' alone, sempre la stessa misura. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, [contenteditable="true"]):focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: var(--sh-focus) !important;
}

/* I contenitori che fanno da campo (ricerca con icona, prefisso telefonico):
   l'alone va sul contenitore, non sull'input nudo dentro. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .search, .search-inline-wrap,
  .moodle-enrol-course-search-input-wrap, .msg-company-search-line,
  .erp-phone-row, .company-search-input-wrap,
  [class$="-input-wrap"], [class$="-search-wrap"]):focus-within {
  border-color: var(--brand) !important;
  box-shadow: var(--sh-focus) !important;
}
/* ...e allora l'input dentro non ne mette un secondo. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .search, .search-inline-wrap,
  .moodle-enrol-course-search-input-wrap, .msg-company-search-line,
  .erp-phone-row, .company-search-input-wrap,
  [class$="-input-wrap"], [class$="-search-wrap"]) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea):focus {
  /* Le tre :not() non servono a filtrare: servono a PESARE. Fra due
     dichiarazioni entrambe !important vince la specificita', non l'ordine:
     la regola dei campi qui sopra vale (0,5,2) proprio per quelle :not(),
     e questo reset a (0,3,2) perdeva pur venendo dopo. Ora vale (0,6,2). */
  /* Ne' ombra ne' bordo colorato: il contenitore ha gia' disegnato l'anello,
     e un bordo di marca sull'input dentro si vedeva come un SECONDO anello
     attaccato al testo. Il campo interno non ha un contorno proprio. */
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Caselle e interruttori: stesso alone, ma solo da tastiera. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input[type="checkbox"], input[type="radio"]):not([disabled]):focus-visible {
  outline: none;
  box-shadow: var(--sh-focus) !important;
}

/* Comandi: contorno di marca. Erano blu petrolio (6), blu (3) e viola (3). */
body:not(.page-arena-task):not(.page-whatsapp) :is(button, a, [role="button"], summary):focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TESTATE FISSE — perche' le righe si vedevano sopra l'intestazione.
   Non era un problema di colore: il contenitore che scorre aveva
   padding: 10px, e una testata "sticky top: 0" si ferma al bordo interno
   del padding, cioe' DIECI PIXEL PIU' IN BASSO del bordo del contenitore.
   In quella banda le righe continuano a scorrere visibili. Si toglie il
   padding SOPRA al contenitore e lo si restituisce alla testata, che cosi'
   arriva davvero a filo.
   Secondo pezzo: con border-collapse: collapse il bordo inferiore di una
   testata fissa non viene disegnato durante lo scorrimento. Si sostituisce
   con un'ombra interna, che invece regge.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(div, section, td):has(> table:is(
  .mon-monthly-table, .wa-table, .data-table, .details-table,
  .company-table, .mon-detail-courses-table)) {
  padding-top: 0 !important;
}
/* Con il raggruppamento per corso la tabella NON e' piu' figlia diretta del
   contenitore che scorre: sta dentro un blocco per ogni corso. La regola
   qui sopra azzerava il padding al blocco — che non scorre — e lasciava i
   suoi 10px a chi scorre davvero. Qui si nomina il contenitore, a qualunque
   profondita' stia la tabella. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .mon-monthly-list-wrap, .mon-detail-table-wrap):has(table) {
  padding-top: 0 !important;
}
/* Il titolo del corso NON si fissa: renderlo sticky obbligava a spostare la
   testata di un'altezza indovinata (34px), e quel numero lasciava proprio la
   banda che si voleva togliere. Il titolo scorre via, la testata resta a
   filo come nel caso non raggruppato. Un comportamento solo per i due casi. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .mon-monthly-table, .wa-table, .data-table, .details-table,
  .company-table, .mon-detail-courses-table) th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-tertiary) !important;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--border-color);
  padding-top: 12px;
}

/* ── Le date non vanno a capo ─────────────────────────────────────────────
   "Completato il" spezzava l'anno sull'ultima cifra. Una data e' un valore
   unico: o ci sta, o la colonna si allarga. Mai a meta'. ── */
body:not(.page-arena-task):not(.page-whatsapp) .mon-monthly-table :is(th, td):last-child,
body:not(.page-arena-task):not(.page-whatsapp) :is(td, th)[class*="-date"],
body:not(.page-arena-task):not(.page-whatsapp) :is(td, th)[class*="-data"],
body:not(.page-arena-task):not(.page-whatsapp) :is(td, th)[class*="scadenza"] {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREZIONE: la cornice di troppo attorno ai lavoratori in accordion.
   Avevo scritto "ogni tabella incassata in un contenitore e' un pannello"
   con .table-wrap:has(table). Ma in Scheda azienda quel contenitore non
   avvolge una tabella nuda: avvolge un elenco di schede che hanno gia' il
   loro bordo. Risultato: cornice dentro cornice. Stesso errore delle barre
   filtri annidate — chi contiene gia' dei pannelli non si incornicia.
   ══════════════════════════════════════════════════════════════════════════ */
/* Nessuna regola di annullamento: l'esclusione e' stata spostata NELLA regola
   pannello qui sopra. Annullare a valle lasciava in piedi il suo
   "overflow: hidden", che spegneva lo scorrimento del contenitore proprio
   quando l'accordion si apriva. Meglio non applicare la regola che rattopparla. */

/* ══════════════════════════════════════════════════════════════════════════
   PULSANTI DOCUMENTO (contatore + cartella) — nella famiglia delle pastiglie.
   Erano rettangoli arrotondati accanto a pastiglie ovali, con un verde
   #10b981 che non e' ne' la marca ne' il verde Safe', bordo 2px sul parziale
   contro 1px sugli altri, e tre contorni a fuoco diversi.
   Ora: stessa forma e stessa altezza delle pastiglie accanto. Il
   RIEMPIMENTO dice lo stato dei documenti (completi / parziali / nessuno),
   il bordo resta di un solo spessore. Sono comandi, quindi il bordo c'e'.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-docs-badge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 22px !important;
  padding: 3px 9px !important;
  border-radius: var(--r-pill) !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: var(--fs-micro) !important;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
  background-image: none !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-docs-badge-btn--compact {
  min-height: 20px !important;
  padding: 2px 8px !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-docs-badge-btn--full {
  background-color: var(--st-ok-bg) !important;
  border-color: color-mix(in oklab, var(--st-ok), transparent 55%) !important;
  color: var(--st-ok) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-docs-badge-btn--partial {
  background-color: var(--st-warn-bg) !important;
  border-color: color-mix(in oklab, var(--st-warn), transparent 55%) !important;
  color: var(--st-warn) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .az-safee-docs-badge-btn--empty, .az-safee-docs-badge-btn--none) {
  background-color: var(--st-neutral-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-docs-badge-btn:hover {
  filter: brightness(1.06);
}
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-docs-badge-icon {
  font-size: 11px;
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   ETICHETTE DEI FILE — piu' respiro, e una misura sola.
   Erano quattro padding diversi per la stessa cosa: .doc-badge 3/8,
   .az-doc-chip 2/8, .az-safee-docs-badge-btn 3/9, .msg-attach-chip 4/10.
   La forma e' scritta per famiglia, non per nome di classe, cosi' prende
   anche le varianti che compariranno dopo.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .doc-badge, .az-doc-chip, .msg-attach-chip, .az-safee-docs-badge-btn,
  [class*="doc-chip"], [class*="docs-badge-btn"], [class*="doc-badge"],
  [class*="attach-chip"], [class*="file-chip"], [class*="file-badge"]
  ):not([class*="-count"]):not([class*="-icon"]):not([class*="-text"]):not([class*="-label"]):not([class*="doc-status-"]) {
  /* Le esclusioni non sono pignoleria: senza di esse [class*="docs-badge"]
     agganciava anche .az-safee-docs-badge-count e ...-icon, cioe' il
     CONTENUTO della pastiglia. Prendendo padding e altezza minima loro,
     la pastiglia passava da 22 a 33 pixel. */
  padding: 5px 16px !important;
  min-height: 24px !important;
  gap: 7px;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .az-safee-docs-badge-btn--compact,
  [class*="docs-badge-btn"][class*="--compact"],
  [class*="doc-chip"][class*="--compact"]
  ):not([class*="-count"]):not([class*="-icon"]):not([class*="-text"]):not([class*="-label"]) {
  /* Stesso numero di :not() della regola qui sopra: senza, questa pesava
     meno e la variante densa rendeva alla misura normale. */
  padding: 4px 13px !important;
  min-height: 22px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA COLONNA DEI DOCUMENTI ERA TARATA SULLA PASTIGLIA VECCHIA.
   .az-col-doc e' fissata a 58px (width, min-width e max-width tutte e tre),
   e la pastiglia ha max-width: 100%. Dandole 16px di padding per lato
   servivano 63px in una cella da 58: veniva compressa, e il padding
   spariva a schermo pur esistendo nel foglio. Non serviva altro padding,
   serviva spazio per metterlo.
   ══════════════════════════════════════════════════════════════════════════ */
/* Non un'altra larghezza fissa — e' proprio quello il difetto. La colonna
   si misura sul suo contenuto: min-width: max-content garantisce che ci
   stia la pastiglia intera, qualunque padding le venga dato domani.
   E niente overflow: hidden, che la tagliava a meta' invece di allargarla. */
body:not(.page-arena-task):not(.page-whatsapp) :is(.az-worker-inner-table, .az-worker-role-holders-table)
  :is(th, td)[class*="az-col-doc"],
body:not(.page-arena-task):not(.page-whatsapp) :is(.az-worker-inner-table, .az-worker-role-holders-table)
  :is(th, td)[class*="az-col-templates"],
body:not(.page-arena-task):not(.page-whatsapp) :is(.az-worker-inner-table, .az-worker-role-holders-table)
  :is(th, td)[class*="az-col-attestati"] {
  /* Misura presa dalla pastiglia vera: 57px + 8 di padding della cella = 65,
     arrotondati a 72 per margine. Ne' 58 (tagliava) ne' auto (si prendeva
     297px). E overflow visibile: se un domani la pastiglia cresce ancora,
     sborda invece di essere affettata a meta'. */
  width: 72px !important;
  min-width: 72px !important;
  max-width: none !important;
  overflow: visible !important;
}
/* La pastiglia non si comprime sotto la sua misura naturale. */
body:not(.page-arena-task):not(.page-whatsapp) .az-safee-docs-badge-btn {
  max-width: none !important;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   ETICHETTA UFFICIO — una sola, e dentro il sistema.
   C'erano due renderer per la stessa cosa: Moduli disegnava
   .status-chip.menu-chip (indaco #818cf8), Utenti usava .recipient-tag--office
   (blu #0f4ea8). Ora il renderer e' uno solo. E il colore non e' piu' blu:
   il blu dice "dato dal CRM", mentre un ufficio e' una struttura interna,
   quindi porta il colore della casa.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) .recipient-tag--office {
  background: color-mix(in oklab, var(--brand), transparent 88%) !important;
  color: var(--brand-strong) !important;
  border: 1px solid color-mix(in oklab, var(--brand), transparent 62%) !important;
  font-weight: 600;
}
body:not(.page-arena-task):not(.page-whatsapp) .recipient-tag--office i {
  color: inherit;
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREZIONE: i pulsanti tondi erano diventati quadrati.
   La regola che impone la geometria dei comandi — .btn { border-radius:
   var(--r-sm) !important } — serve a battere i 266 stili in linea del
   JavaScript, ma agganciava anche le chiusure di modale, che sono
   <button class="btn ... modal-close-circle-btn"> e devono restare TONDE.
   La regola che le arrotonda non aveva !important, quindi perdeva.
   Qui la forma circolare vince, perche' arriva dopo e con lo stesso peso.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .modal-close-circle-btn, .msg-delete-btn, .company-search-clear,
  [class*="close-circle"], [class*="-circle-btn"]) {
  border-radius: var(--r-pill) !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALI — allineamento al riferimento (sezione 16 del design system).
   Il maiuscolo appartiene alle etichette di SEZIONE, non a quelle di campo.
   E i campi hanno fondo chiaro su pannello, non il contrario.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .admin-field, .incassi-field, .pc-field, .wa-field) > label,
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .admin-field, .incassi-field) label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

/* Campi dentro una modale: superficie chiara, come nel riferimento. */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
      select, textarea) {
  background-color: var(--bg-secondary) !important;
  background-image: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEZIONI DENTRO LE MODALI
   Il riferimento raggruppa i campi e mette sopra ogni gruppo un'etichetta.
   Nell'app i campi stanno in una griglia (.wa-form-grid): avvolgerli in un
   pannello romperebbe la griglia, quindi la sezione la fa l'ETICHETTA a
   piena riga — lo stesso meccanismo che Scadenze usa gia'.
   Il maiuscolo qui e' corretto: e' un'etichetta di SEZIONE, non di campo.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .modal-group-title, .scadenza-edit-section-label, [class*="-section-label"]) {
  grid-column: 1 / -1;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) 0 var(--sp-2);
  border-top: 1px solid var(--border-color);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .modal-group-title, .scadenza-edit-section-label, [class*="-section-label"]):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MISURA UNICA DEI CAMPI
   Sezione 7 del design system: i campi hanno raggio --r-md (10px). In giro
   ce n'erano a 6px (.admin-field input, modali Utenti/Uffici) e a 8px
   (.moodle-enrol-input, modale Didattiko): tre misure per lo stesso oggetto,
   ed e' quello che si nota mettendo le due modali una accanto all'altra.
   Qui la misura la impone il sistema: stessa altezza, stesso raggio,
   stesso corpo, ovunque.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea):not([class*="-seg__"]) {
  border-radius: var(--r-md) !important;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  min-height: 36px;
  line-height: 1.35;
}
body:not(.page-arena-task):not(.page-whatsapp) textarea {
  min-height: 72px;
}
/* I contenitori che fanno da campo seguono la stessa forma. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="-input-wrap"], [class*="-search-wrap"], .erp-phone-row,
  .company-search-input-wrap, .moodle-enrol-course-search-input-wrap) {
  border-radius: var(--r-md) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ULTIME DUE CHIUSURE DAL CONTROLLO PAGINA PER PAGINA (57 pagine)
   1. .aging-table (Ufficio amministrativo) era l'unica tabella reale che le
      regole non nominavano: la sua intestazione non aveva il trattamento.
   2. 205 campi sono senza classe. Le regole del sistema li agganciano gia'
      per ELEMENTO, quindi rendono correttamente; questa riga rende esplicito
      che anche un campo nudo appartiene al sistema.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(.aging-table, [class$="-table"]) th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px var(--sp-4);
}
/* Bordo e fondo per OGNI campo, non solo per quelli senza classe: un campo
   la cui classe non e' definita in un foglio caricato rendeva col grigio
   predefinito del browser. Niente !important, cosi' una regola piu' precisa
   (campo in sola lettura, campo in errore) puo' ancora avere la meglio. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea):not([class*="-seg__"]) {
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALI — allineamento ai VALORI del riferimento (sezione 16).
   Confrontando le regole del documento con quelle scritte finora, le
   differenze erano cinque, tutte misurabili:
     testata e piede   --sp-4 --sp-5   invece di  --sp-5 --sp-6
     corpo             --sp-5          invece di  --sp-6
     etichetta campo   peso 600        invece di  peso 500
     campo             8px 10px        invece di  9px 12px
     chiusura          btn-secondary (riquadro grigio pieno)
                       invece di btn--ghost (trasparente)
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-head"], [class*="modal-header"]) {
  padding: var(--sp-5) var(--sp-6) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="modal-foot"], [class*="modal-footer"], .modal-actions, .modal-buttons) {
  padding: var(--sp-5) var(--sp-6) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  > .modal-content {
  padding: var(--sp-6) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PIEDE DELLA MODALE E PULSANTE DI SEGNALAZIONE (telefono)
   Sotto i 480px la modale e' un foglio dal basso (dashboard-auth.css) e il
   pulsante di segnalazione bug — 34px, a 8px dal fondo, 20px da destra,
   z-index 1600 cioe' SOPRA le modali (1200) — copriva esattamente i tasti del
   piede, che stanno a destra. Non si stacca il foglio dal fondo (resterebbe
   un foglio con un buco sotto): il piede riserva quella fascia, i tasti
   salgono sopra il pulsante. Solo se il pulsante c'e' ed e' visibile.
   Misure prese dal CSS del pulsante in app-shell.js: se cambia li', va
   cambiato qui.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  body:not(.page-arena-task):not(.page-whatsapp):has(#erpFeedbackWrap:not(.erp-feedback-wrap--hidden)) :is(
    [class*="modal-foot"], [class*="modal-footer"], .modal-actions, .modal-buttons) {
    padding-bottom: calc(var(--sp-5) + max(8px, env(safe-area-inset-bottom, 0px)) + 34px + 6px) !important;
  }
}

/* La chiusura e' un comando discreto: nessun riquadro, nessun bordo. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .modal-close-circle-btn, [class*="close-circle"]) {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .modal-close-circle-btn, [class*="close-circle"]):hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

/* Etichetta di campo: peso 500, come nel riferimento. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="modal-card"], [class*="modal-panel"]) :is(.wa-field, .admin-field, .doc-field, .field) > label,
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="modal-card"], [class*="modal-panel"]) .field-label {
  font-weight: 500 !important;
  font-size: var(--fs-sm) !important;
  color: var(--text-secondary) !important;
  margin-bottom: 5px;
}

/* Campo: la misura del riferimento. */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
      select, textarea) {
  padding: 9px 12px !important;
}

/* Etichetta di sezione: corpo 12px e spaziatura .04em, come nel riferimento. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .modal-group-title, .scadenza-edit-section-label, [class*="-section-label"]) {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   IL BOX DEI CAMPI — i tre livelli del riferimento.
   Nel riferimento la modale ha tre superfici distinte: la CARTA, il BOX che
   raccoglie i campi, e i CAMPI stessi, piu' chiari del box. E' quella
   differenza a rendere il modulo leggibile. Alcune modali (Programmazione
   corsi) il box ce l'avevano gia' come .pc-detail-group; quasi tutte no.
   Il contenitore dei campi esiste sempre — .wa-form-grid, *-detail-group —
   quindi il box si ottiene senza toccare il markup.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(.wa-form-grid, .admin-form, form,
      [class*="-detail-group"]:not([class*="-title"]):not([class*="-body"]):not([class*="-kv"])) {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
/* I campi sono la superficie piu' chiara: e' il contrasto col box a farli
   leggere come "da compilare". */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(.wa-form-grid, .admin-form, form, [class*="-detail-group"])
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
      select, textarea) {
  background-color: var(--bg-secondary) !important;
}
/* L'etichetta di sezione sta SOPRA il box, non dentro: fa da titolo al gruppo. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .modal-group-title, [class*="-section-label"]) {
  border-top: 0;
  padding-top: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TITOLI DELLE MODALI — uno solo, senza icona.
   Sono tutti <h3>, quindi la misura era gia' allineata; a variare era la
   presenza dell'icona: 9 modali su 46 ne avevano una, 37 no. Il riferimento
   non ne ha. L'icona si spegne qui, in un punto solo, e si riaccende
   togliendo questa regola se un domani la si vuole ovunque.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-head"], [class*="modal-header"])
  :is(h2, h3, h4) > i:first-child {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   IL PIEDE DENTRO IL FORM
   Molte modali hanno i comandi come ultimo figlio del <form>, che ora fa da
   box: senza questa regola i pulsanti finivano DENTRO il riquadro dei campi,
   mentre nel riferimento stanno fuori, sotto una riga di separazione.
   Il piede sborda fino ai bordi del box e si prende la riga.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(form, .wa-form-grid, .admin-form) > :is(div, .modal-foot):last-child:has(> .btn) {
  margin: var(--sp-6) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) !important;
  padding: var(--sp-5) var(--sp-6) !important;
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--r-md) var(--r-md);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   CAMPI COMPOSTI — stessa altezza di un campo semplice.
   .erp-phone-row avvolge il prefisso "+39" e l'input: essendo un
   CONTENITORE sommava la propria altezza a quella del campo dentro, e in
   una colonna di campi si vedeva subito che era piu' alto degli altri.
   Ora e' il contenitore ad avere la misura del campo, e l'input dentro non
   ne porta una propria.
   ══════════════════════════════════════════════════════════════════════════ */
/* Solo il prefisso telefonico vuole i figli a tutta altezza e nessun padding:
   li' il prefisso e' un blocco affiancato al campo. Le barre di ricerca
   invece hanno un'icona dentro, e azzerare il padding la incollava al bordo:
   e' cosi' che la lente della ricerca in alto aveva cambiato posizione. */
body:not(.page-arena-task):not(.page-whatsapp) .erp-phone-row {
  display: flex;
  align-items: stretch;
  min-height: 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background-color: var(--field-bg);
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="-input-wrap"], [class*="-search-wrap"],
  .company-search-input-wrap, .moodle-enrol-course-search-input-wrap) {
  display: flex;
  align-items: center;
  border: 1px solid var(--field-border);
  background-color: var(--field-bg);
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .erp-phone-row, [class*="-input-wrap"], [class*="-search-wrap"],
  .company-search-input-wrap, .moodle-enrol-course-search-input-wrap)
  :is(input, select, textarea) {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex: 1 1 auto;
}
body:not(.page-arena-task):not(.page-whatsapp) .erp-phone-prefix {
  display: inline-flex;
  align-items: center;
  /* Il prefisso aveva min-height: 44px e trascinava su tutta la riga: era
     lui a rendere il campo Cellulare piu' alto degli altri. */
  min-height: 0 !important;
  height: auto !important;
  padding: 0 var(--sp-4) !important;
  border: 0 !important;
  border-right: 1px solid var(--border-color) !important;
  background: var(--bg-tertiary);
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

/* Il <select> calcola l'interlinea in modo proprio e restava 1px piu' alto
   degli <input>. In una colonna di campi si vede. Misura esplicita. */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select) {
  height: 38px;
  box-sizing: border-box;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(.erp-phone-row, [class*="-input-wrap"]) {
  height: 38px;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   LE SUPERFICI DEL MODULO — i token che il design system ha e l'app no.
   Il riferimento non usa --bg-tertiary per il box dei campi: usa --panel-bg,
   che nel tema CHIARO vale #f4f6f8 (grigio freddo) invece di #e8e8e8
   (grigio piatto). Nel tema scuro i due coincidono, ed e' per questo che la
   differenza si vedeva solo di giorno.
   Stessa cosa per il bordo (#d4dbe3) e per la superficie del campo.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --panel-bg: var(--bg-tertiary);
  --panel-border: var(--border-color);
  --field-bg: var(--bg-secondary);
  --field-border: var(--border-color);
}
html.light-theme, body.light-theme, :root[data-theme="light"] {
  --panel-bg: #f4f6f8;
  --panel-border: #d4dbe3;
  --field-bg: #ffffff;
  --field-border: #d4dbe3;
}
/* NIENTE @media prefers-color-scheme: in questa applicazione il tema scuro e'
   il predefinito e il chiaro si attiva SOLO con la classe .light-theme.
   Un blocco su preferenza di sistema faceva rendere chiaro il tema scuro su
   un computer impostato in chiaro. Stessa convenzione di dashboard-auth.css. */

body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(.wa-form-grid, .admin-form, form, .modal-group,
      [class*="-detail-group"]:not([class*="-title"]):not([class*="-body"]):not([class*="-kv"])) {
  background: var(--panel-bg) !important;
  border-color: var(--panel-border) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
      select, textarea) {
  background-color: var(--field-bg) !important;
  border-color: var(--field-border) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(.erp-phone-row, [class*="-input-wrap"]) {
  background-color: var(--field-bg) !important;
  border-color: var(--field-border) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .erp-phone-prefix {
  background: var(--panel-bg) !important;
  border-right-color: var(--field-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   IL CONTRASTO CAMPO/CONTENITORE VALE OVUNQUE, NON SOLO NELLE MODALI.
   La differenza fra la superficie del contenitore e quella del campo e' cio'
   che fa capire dove si scrive. Finora l'avevo scritta solo per le modali:
   le barre filtri, le barre strumenti e i moduli in pagina restavano fuori.
   Qui la regola diventa generale: contenitore = --panel-bg, campo = --field-bg.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea):not([class*="-seg__"]) {
  background-color: var(--field-bg);
  border-color: var(--field-border);
}
/* Le barre filtri e strumenti sono contenitori: prendono la superficie del
   pannello, cosi' i campi dentro risaltano. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .wa-filter-row, .filters, .filters-row, .status-filter-bar, .acc-lt-cal-filter,
  .diff-filters, .dash-filter-card, .didattiko-delivery-filters, .rf-filters-bar,
  .pc-editions-filters, .pr-filters, .mf-filters-bar, .pf-summary-filters,
  .period-filter-bar) {
  background-color: var(--panel-bg);
  background-image: none;
  border-color: var(--panel-border);
}
/* I contenitori che fanno da campo seguono il campo, non il pannello. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .erp-phone-row, [class*="-input-wrap"], [class*="-search-wrap"],
  .company-search-input-wrap, .search-inline-wrap) {
  background-color: var(--field-bg);
  border-color: var(--field-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   IL PIEDE E' FISSO, NON L'ULTIMA RIGA DEL MODULO.
   Nel riferimento la carta ha TRE figli: testata, corpo, piede. Il corpo e'
   l'unico a scorrere; il piede resta in fondo e la sua riga arriva ai bordi.
   Nell'app il piede stava DENTRO il corpo, quindi scorreva col contenuto e
   la barra di scorrimento gli passava accanto. Ora la carta e' una colonna
   e il corpo e' l'unico pezzo che scorre.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"]) {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  > :is([class*="modal-head"], [class*="modal-header"], [class*="modal-foot"], .modal-actions) {
  flex: 0 0 auto;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  > .modal-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
/* Il piede a fondo carta non ha piu' bisogno di sbordare da un box. */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  > :is([class*="modal-foot"], .modal-actions) {
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABELLE — le due regole che il riferimento ha e l'app no.
   Nel gestionale ci sono 53 classi di tabella diverse. Le regole scritte
   finora nominavano .company-table e .data-table: le altre 51 restavano
   senza passaggio del mouse e senza freccia d'ordinamento disegnata.
   Qui si descrive il RUOLO — una riga di corpo tabella, un'intestazione
   ordinabile — quindi vale ovunque, comunque si chiami la tabella.
   ══════════════════════════════════════════════════════════════════════════ */

/* Passaggio del mouse: la riga si illumina, come nel provino della sezione 14. */
body:not(.page-arena-task):not(.page-whatsapp) table tbody tr:hover > :is(td, th),
body:not(.page-arena-task):not(.page-whatsapp) table tbody tr.is-hover > :is(td, th) {
  background-color: var(--bg-hover);
}
/* Le righe non cliccabili non fingono di esserlo. */
body:not(.page-arena-task):not(.page-whatsapp) table tbody tr:has(> td [class*="btn"]),
body:not(.page-arena-task):not(.page-whatsapp) table tbody tr[onclick],
body:not(.page-arena-task):not(.page-whatsapp) table tbody tr[data-id] {
  cursor: pointer;
}

/* Intestazione ordinabile: freccia DISEGNATA, non un carattere tipografico.
   Le frecce dei font cambiano forma da un carattere all'altro; una maschera
   SVG resta identica ovunque. */
body:not(.page-arena-task):not(.page-whatsapp) th:is(.sortable, .sortable-th, .is-sortable) {
  cursor: pointer;
  user-select: none;
  position: relative;
  /* !important perche' la regola generale delle intestazioni arriva dopo e
     riportava il padding a 10px: la freccia finiva sopra il testo. */
  padding-right: 22px !important;
}
body:not(.page-arena-task):not(.page-whatsapp) th:is(.sortable, .sortable-th, .is-sortable)::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -5px;
  width: 8px;
  height: 10px;
  opacity: 0.4;
  background-color: currentColor;
  -webkit-mask: var(--sort-mask) center / 8px 10px no-repeat;
  mask: var(--sort-mask) center / 8px 10px no-repeat;
  --sort-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 0 8 4H0z'/%3E%3Cpath d='M4 10 0 6h8z'/%3E%3C/svg%3E");
}
body:not(.page-arena-task):not(.page-whatsapp) th:is(.sortable, .sortable-th, .is-sortable):hover {
  color: var(--text-primary);
}
body:not(.page-arena-task):not(.page-whatsapp) th:is(.sortable, .sortable-th, .is-sortable):is([data-sort="asc"], [data-sort-dir="asc"], .sort-asc)::after {
  opacity: 1;
  /* La colonna ATTIVA porta il verde di marca: dice a colpo d'occhio su cosa
     e' ordinato l'elenco. Le altre restano grigie al 40%. */
  background-color: var(--brand);
  --sort-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 0 8 5H0z'/%3E%3C/svg%3E");
}
body:not(.page-arena-task):not(.page-whatsapp) th:is(.sortable, .sortable-th, .is-sortable):is([data-sort="desc"], [data-sort-dir="desc"], .sort-desc)::after {
  opacity: 1;
  background-color: var(--brand);
  --sort-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10'%3E%3Cpath d='M4 10 0 5h8z'/%3E%3C/svg%3E");
}
/* Dove l'ordinamento e' un'icona Font Awesome dentro lo <span>, la si spegne:
   la freccia la disegna la regola qui sopra, una sola per tutta l'app. */
body:not(.page-arena-task):not(.page-whatsapp) th:is(.sortable, .sortable-th, .is-sortable) .sort-icon {
  display: none;
}

/* La colonna delle azioni resta stretta e non compete coi dati. */
body:not(.page-arena-task):not(.page-whatsapp) table :is(td, th):is(.actions, [class*="-actions"], [class*="col-azioni"]) {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABELLE LARGHE — TUTTE LE COLONNE SCORRONO
   Qui la prima colonna era "sticky": restava ferma mentre il resto scorreva.
   Su schermo stretto pero' si mangiava 240px dei ~375 disponibili e restava
   piantata li', rendendo inutile lo scorrimento — le altre colonne passavano
   sotto in una fessura. Una tabella si comporta come tutte le altre: scorre
   per intero dentro .table-wrap.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   LENTE NEI CAMPI DI RICERCA
   Su 88 campi che filtrano per testo, 66 avevano la lente e 22 no. Qui la
   riceve chi non ce l'ha: l'esclusione ":not(i + input)" salta i campi che
   hanno gia' un'icona come fratello precedente, cosi' non ne compaiono due.
   Disegnata come immagine di sfondo, quindi nessun markup da toccare.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input[type="search"],
  input[placeholder^="Cerca" i],
  input[placeholder^="Ricerca" i],
  input[placeholder^="Filtra" i]):not(i + input):not(svg + input):not([class*="-seg__"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23808c96' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px 15px;
  padding-left: 32px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LA COLONNA FLESSIBILE NON PUO' COLLASSARE.
   In Aziende le altre colonne hanno larghezze fisse che sommano 848px; la
   prima — Ragione sociale — non ne ha e prende "quel che avanza". In un
   contenitore da 516px quel che avanza e' ZERO, e la colonna spariva: e'
   questo il "taglio". Il difetto esisteva gia' prima del design system
   (verificato disattivando questo foglio: larghezza zero in entrambi i casi).
   Una larghezza minima glielo impedisce; il resto scorre, e la colonna
   fissa la tiene visibile mentre si scorre.
   ══════════════════════════════════════════════════════════════════════════ */
/* Con table-layout: fixed comandano le larghezze del <colgroup> e il
   min-width sulle celle viene IGNORATO: la misura va messa sulla colonna. */
body:not(.page-arena-task):not(.page-whatsapp) table:has(thead th:nth-child(9))
  colgroup col:first-child:not([style*="width"]) {
  width: 240px;
}
body:not(.page-arena-task):not(.page-whatsapp) table:has(thead th:nth-child(9))
  :is(thead th, tbody td):first-child {
  min-width: 200px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEZIONI DI MODULO COSTRUITE DAL JAVASCRIPT
   La modale di iscrizione ai corsi raggruppa i campi in <section
   class="moodle-enrol-section"> con un <h4> come titolo. Il markup e' giusto
   — e' proprio la struttura del riferimento — ma non aveva stile: campi
   bianchi su fondo bianco, nessun box, nessun contrasto.
   Qui la regola guarda la STRUTTURA: dentro una modale, una sezione che
   contiene campi e' un box, e il suo titolo e' un'etichetta di sezione.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(section, [class*="-section"]):has(:is(input, select, textarea)) {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(section, [class*="-section"]):has(:is(input, select, textarea)) > :is(h3, h4, h5) {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* La nota sotto il titolo resta discorsiva, non diventa un'etichetta. */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(section, [class*="-section"]) > :is(p, .moodle-enrol-hint) {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREZIONE: il campo dentro un contenitore non prende l'altezza fissa.
   La regola "height: 38px" sui campi delle modali colpiva anche gli input
   annidati in un contenitore alto 38px: sommati i due bordi da 1px, l'input
   sbordava di 2px e copriva il bordo sopra e sotto del contenitore.
   E' cosi' che il campo "Cerca corso" aveva perso i bordini.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"])
  :is(.erp-phone-row, [class*="phone-wrap"], [class*="-input-wrap"], [class*="-search-wrap"])
  :is(input, select, textarea) {
  height: auto !important;
  align-self: stretch;
  min-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PREFISSO TELEFONICO — uno solo per tutta l'app.
   Nuovo utente usa .erp-phone-row + .erp-phone-prefix; l'iscrizione ai corsi
   usa .moodle-enrol-phone-wrap + .moodle-enrol-phone-prefix, che le regole
   non raggiungevano: li' il prefisso restava un riquadro a se', con un bordo
   tutto attorno, invece di essere un blocco unito al campo.
   Qui si nomina la FORMA, non la pagina.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .erp-phone-row, [class*="phone-wrap"], [class*="phone-row"]) {
  display: flex;
  align-items: stretch;
  min-height: 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--field-border);
  border-radius: var(--r-md);
  background-color: var(--field-bg);
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .erp-phone-prefix, [class*="phone-prefix"]) {
  display: inline-flex;
  align-items: center;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 var(--sp-4) !important;
  border: 0 !important;
  border-right: 1px solid var(--field-border) !important;
  border-radius: 0 !important;
  background: var(--panel-bg) !important;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  white-space: nowrap;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .erp-phone-row, [class*="phone-wrap"], [class*="phone-row"]) :is(input, select) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDINAMENTO — UNA SOLA CONVENZIONE.
   Fino a poco fa le pagine segnavano la colonna ordinata in quattro modi:
   una classe sullo <th>, un attributo, oppure scambiando l'icona — e con
   due famiglie di icone diverse (fa-sort-up e fa-arrow-up-short-wide).
   Inseguire ogni variante nel CSS voleva dire aggiungere una regola a ogni
   pagina nuova. Ora TUTTE le pagine scrivono data-sort-dir sullo <th>, e qui
   basta leggerlo: le regole che rincorrevano le icone sono state rimosse.
   ══════════════════════════════════════════════════════════════════════════ */

/* NOTA: l'esclusione :not([class*="search"]) e' stata rimossa da queste
   regole. Serviva a non toccare i CONTENITORI di ricerca, ma escludeva anche
   i campi veri — ed e' per questo che i campi di ricerca di Lavoratori,
   Aziende e Corsi asincroni restavano fuori misura. I campi dentro un
   contenitore sono gia' gestiti dalla regola "altezza automatica". */

/* ══════════════════════════════════════════════════════════════════════════
   TRE FAMIGLIE, NON TRENTA CLASSI.
   Corsi asincroni mostrava il problema in chiaro: .ca-view-btn alto 56px,
   il primario 42, la barra strumenti e quella filtri senza cornice, i campi
   a 34 e i menu a 37. Ogni pagina ha i suoi nomi — ca-, pc-, pf-, mf- — ma
   il RUOLO e' sempre lo stesso. Qui si descrive il ruolo.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Un pulsante e' un pulsante, comunque si chiami.
      MA una SCHEDA non e' un pulsante: .az-tab-btn contiene "-btn" e finiva
      qui dentro, che gli imponeva raggio 8px su tutti e quattro gli angoli
      e padding 6/11, cancellando il suo "10px 10px 0 0". Le schede hanno
      la loro ricetta in fondo a questo foglio. */
body:not(.page-arena-task):not(.page-whatsapp) button[class*="-btn"]:not(.btn):not([class*="circle"]):not([class*="close"]):not([class*="-icon"]):not([class*="tab"]) {
  min-height: 32px;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
}

/* 2. Una barra — filtri o strumenti — e' un contenitore incorniciato. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class$="-filters"], [class$="-filter-bar"],
  [class$="-filters-bar"], [class$="-summary-filters"]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  background-color: var(--panel-bg);
}
/* Una barra dentro un'altra barra non si incornicia due volte. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class$="-filters"], [class$="-filter-bar"],
  [class$="-filters-bar"], [class$="-summary-filters"]) :is(
  [class$="-filters"], [class$="-filter-bar"],
  [class$="-filters-bar"], [class$="-summary-filters"], [class*="-filter-inline"]) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* 3. Un campo ha una misura sola, dentro e fuori dalle modali. */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select):not([class*="-seg__"]) {
  height: 38px;
  box-sizing: border-box;
}


/* ══════════════════════════════════════════════════════════════════════════
   I CONTENITORI CHE FANNO DA CAMPO HANNO LA MISURA DEL CAMPO, OVUNQUE.
   La regola esisteva ma era circoscritta alle modali: fuori di li' le barre
   di ricerca conservavano la loro altezza, e accanto a un campo normale si
   vedeva la differenza. Il campo dentro non porta una misura propria.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .erp-phone-row, [class*="phone-wrap"], [class*="-input-wrap"],
  [class*="-search-wrap"], .company-search-input-wrap, .search-inline-wrap,
  .moodle-enrol-course-search-input-wrap) {
  height: 38px;
  box-sizing: border-box;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .erp-phone-row, [class*="phone-wrap"], [class*="-input-wrap"],
  [class*="-search-wrap"], .company-search-input-wrap, .search-inline-wrap,
  .moodle-enrol-course-search-input-wrap) :is(input, select, textarea) {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch;
  /* Il contorno lo disegna il CONTENITORE: un bordo anche sul campo dentro
     produceva la doppia cornice nelle barre di ricerca. */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   L'INTESTAZIONE DI PAGINA NON E' UNA BARRA FILTRI.
   Avevo incluso [class$="-toolbar"] fra i contenitori da incorniciare: cosi'
   il titolo di pagina finiva dentro un riquadro alto 55px, che nelle altre
   pagine non c'e'. Una barra di FILTRI raccoglie controlli e si incornicia;
   un'intestazione porta il titolo e le azioni, e resta sul fondo pagina.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .page-toolbar, [class$="-toolbar"]):not([class*="filter"]) {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTATORI DI RIEPILOGO — il modello del sistema, non uno per pagina.
   Sezione del design system: etichetta sopra (12px, secondaria), numero
   sotto (22px, cifre tabellari). Corsi asincroni li rendeva in fila —
   "38 Iscritti" tutto su una riga a 16px — e accanto ai contatori della
   dashboard sembravano un altro componente.
   Il markup mette prima il numero e poi l'etichetta: column-reverse rimette
   l'etichetta sopra senza toccare il markup generato dal JavaScript.
   ══════════════════════════════════════════════════════════════════════════ */
body:not(.page-arena-task):not(.page-whatsapp) :is(.ca-kpi, [class$="-kpi"]) {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 96px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  background-color: var(--panel-bg);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.ca-kpi, [class$="-kpi"]) strong {
  font-size: var(--fs-kpi);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}


/* =========================================================================
   ELENCO LEZIONI DIDATTIKO (componente della modale scheda lavoratore)
   Stava nel foglio della sola pagina monitoraggio: ovunque altro la modale
   disegnava le lezioni senza stile. E' un componente condiviso, quindi le
   sue regole stanno qui, dove le vedono tutte le pagine.
   Un accordion e' un accordion: stesse misure di quelli di formazione.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-item {
  border: 1px solid var(--panel-border, var(--border-color));
  border-radius: var(--r-md);
  background: var(--panel-bg, var(--bg-tertiary));
  /* Niente overflow: hidden — spezzava il "position: sticky" del
     conteggio lezioni, che si aggancia allo scorrimento del corpo
     della modale. Gli angoli li arrotonda gia' il border-radius. */
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary::-webkit-details-marker { display: none; }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary:hover { background: var(--bg-secondary); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary-ring,
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary-status { flex-shrink: 0; display: inline-flex; align-items: center; }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-summary-code {
  font-size: var(--fs-micro);
  color: var(--text-secondary);
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-hidden {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--st-neutral);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-item[open] .moodle-course-chevron { transform: rotate(180deg); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-chevron {
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-activities {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--panel-border, var(--border-color));
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-course-activities-hint { font-size: var(--fs-micro); padding: var(--sp-2) 0; color: var(--text-secondary); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-snapshot-note {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-courses-loading,
body:not(.page-arena-task):not(.page-whatsapp) .moodle-courses-error,
body:not(.page-arena-task):not(.page-whatsapp) .moodle-courses-empty { font-size: var(--fs-micro); padding: var(--sp-2) 0; color: var(--text-secondary); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-courses-error { color: var(--st-danger); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  padding: var(--sp-2) 0 var(--sp-2);
  font-weight: 600;
  /* Il conteggio "N / M lezioni completate" resta in vista mentre si
     scorre: e' il modo per sapere se l'elenco e' completo senza
     dover contare le voci. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-bg);
  margin: 0 calc(-1 * var(--sp-4));
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity-summary-pct { color: var(--src-didattiko); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Niente tetto di 280px: la lista vive dentro il corpo di una modale
     che gia' scorre, quindi lo scorrimento era DOPPIO e quello interno
     non si notava — su 18 lezioni se ne vedevano 11 e le altre
     sembravano non recuperate. Una sola barra: quella del corpo. */
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  padding: var(--sp-2) 0 var(--sp-1);
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 5px 0;
  font-size: var(--fs-micro);
  line-height: 1.35;
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity i { margin-top: 2px; flex-shrink: 0; }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity--done { color: var(--text-primary); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity--done i { color: var(--st-ok); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity--todo { color: var(--text-secondary); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity--todo i { color: var(--border-color); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity--locked { color: var(--text-muted, var(--text-secondary)); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity--locked i { color: var(--text-muted, var(--border-color)); }
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity-type {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--src-didattiko);
  min-width: 42px;
}
body:not(.page-arena-task):not(.page-whatsapp) .moodle-activity-name { flex: 1; min-width: 0; }


/* =========================================================================
   FILTRI DI STATO = LEGENDA DELLA TABELLA
   I pulsanti che filtrano per stato erano tutti grigi: la riga di filtri non
   diceva nulla sul contenuto della tabella. Ora ogni pulsante porta il
   colore dell'etichetta che filtra, e quando e' selezionato assume
   esattamente l'aspetto di quell'etichetta; da spento resta solo il contorno.
   Vale per le due famiglie che usano questo schema (corsi asincroni e
   accordion di formazione): stessa regola, un solo posto.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is(.ca-chip-row, .course-filter-bar, .rf-system-tabs) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.ca-chip, .course-filter-btn, .rf-system-tab, .pc-filter-chip) {
  /* .btn impone il raggio piccolo con !important e sta piu' in alto nel
     foglio: a parita' di specificita' vincerebbe. Qui serve la pastiglia. */
  border: 1px solid var(--border-color);
  border-radius: var(--r-pill) !important;
  padding: var(--sp-1) var(--sp-4) !important;
  font-size: var(--fs-micro) !important;
  font-weight: 600 !important;
  line-height: 1.35;
  min-height: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
/* "Tutti" resta neutro: non filtra uno stato, li mostra tutti. */
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status=""],
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn[data-filter="all"] {
  color: var(--st-neutral) !important;
  border-color: color-mix(in oklab, var(--st-neutral-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status=""].is-active,
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn[data-filter="all"].active {
  color: var(--st-neutral) !important;
  border-color: var(--st-neutral-bd) !important;
  background: var(--st-neutral-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-neutral-bd) !important;
}
/* Da iscrivere e In scadenza: richiedono un'azione. */
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="PendingEnrollment"],
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn--expiring {
  color: var(--st-warn) !important;
  border-color: color-mix(in oklab, var(--st-warn-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="PendingEnrollment"].is-active,
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn--expiring.active {
  color: var(--st-warn) !important;
  border-color: var(--st-warn-bd) !important;
  background: var(--st-warn-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-warn-bd) !important;
}
/* Iscritti: pronto ma non ancora avviato. */
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="Enrolled"] {
  color: var(--st-accent) !important;
  border-color: color-mix(in oklab, var(--st-accent-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="Enrolled"].is-active {
  color: var(--st-accent) !important;
  border-color: var(--st-accent-bd) !important;
  background: var(--st-accent-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-accent-bd) !important;
}
/* In corso: stesso blu del badge Didattiko. */
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="InProgress"] {
  color: var(--st-info) !important;
  border-color: color-mix(in oklab, var(--st-info-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="InProgress"].is-active {
  color: var(--st-info) !important;
  border-color: var(--st-info-bd) !important;
  background: var(--st-info-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-info-bd) !important;
}
/* Esito positivo: completato, regolare, risolto. */
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="Completed"],
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn--regular {
  color: var(--st-ok) !important;
  border-color: color-mix(in oklab, var(--st-ok-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .ca-chip[data-chip-status="Completed"].is-active,
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn--regular.active {
  color: var(--st-ok) !important;
  border-color: var(--st-ok-bd) !important;
  background: var(--st-ok-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-ok-bd) !important;
}
/* Scaduti. */
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn--expired {
  color: var(--st-danger) !important;
  border-color: color-mix(in oklab, var(--st-danger-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .course-filter-btn--expired.active {
  color: var(--st-danger) !important;
  border-color: var(--st-danger-bd) !important;
  background: var(--st-danger-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-danger-bd) !important;
}


/* =========================================================================
   LA ✕ CHE PULISCE UN CAMPO
   Stessa funzione, due forme: 24px tonda nella ricerca globale, 28px
   quadrata nel monitoraggio — e quest'ultima si accendeva di viola
   Didattiko all'hover, cioe' un colore di PROVENIENZA su un comando.
   Una forma sola, e il colore torna a essere quello di un comando.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is(.company-search-clear, .didattiko-monitoring-search-clear) {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--border-color);
  border-radius: var(--r-pill) !important;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.company-search-clear, .didattiko-monitoring-search-clear):hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color);
}


/* ── Le "tab" delle relazioni formazione filtrano STATI, non sistemi ──────
   Il nome diceva sistema, ma i data-state dicono altro: da completare,
   senza corso, completi. Erano colorate col viola Didattiko, cioe' una
   tinta di PROVENIENZA usata per dire uno stato. Entrano nella famiglia
   dei filtri e prendono i colori di stato.
   I chip dei mesi (.pc-filter-chip) NON sono stati: selezione neutra. */

body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="open"] {
  color: var(--st-warn) !important;
  border-color: color-mix(in oklab, var(--st-warn-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="open"].is-active {
  color: var(--st-warn) !important;
  border-color: var(--st-warn-bd) !important;
  background: var(--st-warn-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-warn-bd) !important;
}

body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="no-course"] {
  color: var(--st-danger) !important;
  border-color: color-mix(in oklab, var(--st-danger-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="no-course"].is-active {
  color: var(--st-danger) !important;
  border-color: var(--st-danger-bd) !important;
  background: var(--st-danger-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-danger-bd) !important;
}

body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="done"] {
  color: var(--st-ok) !important;
  border-color: color-mix(in oklab, var(--st-ok-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="done"].is-active {
  color: var(--st-ok) !important;
  border-color: var(--st-ok-bd) !important;
  background: var(--st-ok-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-ok-bd) !important;
}

body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="no-requirement"],
body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state=""],
body:not(.page-arena-task):not(.page-whatsapp) .pc-filter-chip {
  color: var(--st-neutral) !important;
  border-color: color-mix(in oklab, var(--st-neutral-bd), transparent 45%) !important;
  background: transparent !important;
}
body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state="no-requirement"].is-active,
body:not(.page-arena-task):not(.page-whatsapp) .rf-system-tab[data-state=""].is-active,
body:not(.page-arena-task):not(.page-whatsapp) .pc-filter-chip.is-active {
  color: var(--st-neutral) !important;
  border-color: var(--st-neutral-bd) !important;
  background: var(--st-neutral-bg) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--st-neutral-bd) !important;
}


/* =========================================================================
   SCHEDE (TAB) — SI INNESTANO NEL PANNELLO, NON SONO PASTIGLIE
   Il design system disegna la scheda arrotondata SOLO IN ALTO, con il bordo
   inferiore trasparente e un margine di -1px: cosi' la scheda attiva si
   salda al pannello sottostante e il pannello e' arrotondato su tre angoli.
   La scheda azienda lo fa gia' (.az-tab-btn). Impostazioni corsi e vendite
   invece disegnavano rettangoli arrotondati su tutti e quattro gli angoli,
   staccati dal contenuto: sembravano pulsanti, non schede.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is(.ic-tabs, .sales-settings-tabs) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  align-items: flex-end;
  margin: var(--sp-5) 0 0 !important;
  padding: 0 2px;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.ic-tab-btn, .sales-tab-btn) {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--border-color) !important;
  border-bottom-color: transparent !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  margin-bottom: -1px;
  padding: 8px var(--sp-5) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  background: var(--grad-raised) !important;
  color: var(--text-secondary) !important;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.ic-tab-btn, .sales-tab-btn):not(.is-active):hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}
/* La scheda attiva prende il colore del pannello e ne cancella il confine. */
body:not(.page-arena-task):not(.page-whatsapp) :is(.ic-tab-btn.is-active, .sales-tab-btn.is-active) {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  border-bottom-color: var(--bg-secondary) !important;
  box-shadow: none !important;
}
/* Il pannello: tre angoli arrotondati, il quarto lo occupa la scheda. */
body:not(.page-arena-task):not(.page-whatsapp) :is(.ic-panel.is-active, .sales-settings-panels) {
  border: 1px solid var(--border-color);
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  background: var(--bg-secondary);
  padding: var(--sp-6);
}
/* Riga di schede annidata (profili FAD/Presenza/Misto): si salda al suo box. */
body:not(.page-arena-task):not(.page-whatsapp) .ic-panel .ic-tabs + .ic-maps-box {
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  margin-top: 0;
}


/* =========================================================================
   BLOCCHI DOCUMENTO DENTRO LE MODALI
   .doc-block usa --bg-tertiary, che in tema chiaro e' #e8e8e8: fuori da una
   modale va bene, ma dentro e' il grigio "troppo marcato" che il team ha
   gia' scartato per i box di sezione. Dentro una modale valgono i tre
   livelli: scheda -> box di sezione (--panel-bg) -> campo.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"]) :is(.doc-block, .doc-view) {
  /* Solo il RIEMPIMENTO va forzato: il bordo puo' portare la provenienza
     (il riquadro "CRM in Cloud" lo colora di --src-crm). Forzando anche
     border-color con !important cancellavo quel segnale. */
  background: var(--panel-bg) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"]) .doc-table thead th {
  background: transparent;
  border-bottom: 1px solid var(--panel-border);
}

/* =========================================================================
   PASTIGLIE DI STATO NEI REPORT
   .doc-badge era finita nella regola delle ETICHETTE DEI FILE (padding
   5/16, altezza minima 24) perche' il nome combaciava. Ma nel report le
   varianti doc-status-* non etichettano un file: dicono uno stato, e
   devono misurare come tutte le altre pastiglie — 3/10, corpo 11.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) [class*="doc-status-"] {
  padding: 3px 10px !important;
  min-height: 0 !important;
  border-radius: var(--r-pill) !important;
  font-size: var(--fs-micro) !important;
  font-weight: 600 !important;
  line-height: 1.35;
  gap: var(--sp-2);
}


/* =========================================================================
   L'INPUT NASCOSTO DEGLI INTERRUTTORI RESTA NASCOSTO
   La casella di un interruttore e' invisibile: il disegno lo fa lo slider.
   Ma la convenzione delle checkbox di sola lettura — spunta verde se vera,
   CROCETTA ROSSA se falsa — e' scritta come input[type="checkbox"][disabled],
   che ha specificita' maggiore di .switch-input e le ridava larghezza 18px.
   Risultato: un interruttore disabilitato mostrava una crocetta rossa al
   posto del suo slider spento.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  input.switch-input, input.booking-toggle-input,
  .switch-wrap input[type="checkbox"], .item-toggle input[type="checkbox"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none;
}


/* =========================================================================
   LE TABELLE NON SPEZZANO LE PAROLE
   .modal-content porta word-break: break-word — utile per un URL o un JSON
   in mezzo al testo, dannoso in una tabella: la proprieta' si eredita, e
   con le parole spezzabili la larghezza MINIMA di una colonna diventa un
   carattere. Il browser puo' quindi comprimere la colonna Azienda a 70px e
   incolonnare "QUI COMPU / TER / SOCIET / A'".
   Dentro le tabelle si torna a "normal": una parola va a capo solo se da
   sola non ci sta, e per il resto scorre .table-wrap.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is([class*="modal-card"], [class*="modal-panel"]) table {
  word-break: normal;
  overflow-wrap: break-word;
}


/* =========================================================================
   BARRA FILTRI CON CAMPO ETICHETTATO
   La regola generale delle barre filtri centra gli elementi. Ma quando un
   elemento e' un blocco etichetta+campo (60px) accanto a controlli di 38px,
   centrare i BLOCCHI disallinea i CAMPI: l'input finisce 11px piu' in basso
   degli interruttori. Allineando in basso, e dando ai controlli l'altezza
   del campo, i centri tornano a coincidere.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is(.mon-monthly-filters) {
  align-items: flex-end;
}


/* =========================================================================
   NIENTE CORNICI ANNIDATE
   La regola che incornicia un .table-wrap usa :has(), che alza la
   specificita': la scorniciatura scritta come ".modal-card .table-wrap"
   perdeva il confronto, e dentro le modali si vedevano DUE cornici — quella
   della scheda e quella della tabella. Qui la scorniciatura vale per
   qualunque contenitore gia' incorniciato, e vince per costruzione.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  [class*="modal-card"], [class*="modal-panel"], .panel, .wa-panel,
  .doc-block, .modal-group, [class*="-section"], [class*="-block"]
) :is(.table-wrap, [class$="-table-wrapper"]) {
  border: 0 !important;
  border-radius: 0 !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}


/* =========================================================================
   L'INTERRUTTORE DEL TEMA — UNA DEFINIZIONE SOLA
   Ne esistevano tre: 48x24 con pallino 18 (foglio di ufficio amministrativo),
   e 44x22 con pallino 18 in altri due fogli. Lo stato ACCESO era scritto in
   un solo foglio, quindi altrove l'interruttore non diventava nemmeno verde.
   Qui vale la proporzione di riferimento degli interruttori del sistema:
   pallino = altezza - 6, tre pixel di margine su ogni lato, corsa =
   larghezza - pallino - 6.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) .theme-switch {
  width: 44px !important;
  height: 22px !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
body:not(.page-arena-task):not(.page-whatsapp) .theme-switch .theme-switch-handle {
  position: absolute;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}
/* Acceso = tema chiaro. Vale su tutte le pagine, non solo dove era scritto. */
body.light-theme:not(.page-arena-task) .theme-switch,
html.light-theme body:not(.page-arena-task) .theme-switch {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}
body.light-theme:not(.page-arena-task) .theme-switch .theme-switch-handle,
html.light-theme body:not(.page-arena-task) .theme-switch .theme-switch-handle {
  transform: translateX(22px);
}


/* =========================================================================
   LA CHECKBOX-INTERRUTTORE HA LA GEOMETRIA DEL RIFERIMENTO
   Nel gestionale un interruttore si fa in due modi: il componente
   .switch-wrap (38x22, pallino 16, tre pixel di margine) e la checkbox
   nuda, che una regola globale trasforma in interruttore. La seconda era
   40x22 con margini di 1,7px, e da ACCESA il pallino — disegnato con un
   gradiente radiale — arrivava oltre il bordo interno: si vedeva tagliato.
   background-origin: border-box porta le coordinate del gradiente sul
   bordo esterno, cosi' i conti non dipendono piu' dallo spessore del bordo.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) input[type="checkbox"]:not([disabled]):not(.switch-input):not([class*="toggle"]) {
  width: 38px !important;
  min-width: 38px !important;
  height: 22px !important;
  border-radius: var(--r-pill) !important;
  background-origin: border-box !important;
  background-image: radial-gradient(circle 8px at 11px 11px, #fff 98%, transparent 100%) !important;
}
body:not(.page-arena-task):not(.page-whatsapp) input[type="checkbox"]:not([disabled]):not(.switch-input):not([class*="toggle"]):checked {
  background-image: radial-gradient(circle 8px at 27px 11px, #fff 98%, transparent 100%) !important;
}


/* =========================================================================
   UN TITOLO LUNGO NON MANDA A CAPO IL RESTO DELL'INTESTAZIONE
   Le intestazioni sono contenitori flex con wrap e space-between: titolo a
   sinistra, comandi a destra. Ma un figlio flex non puo' restringersi sotto
   la larghezza del proprio contenuto finche' non ha min-width: 0 — quindi
   con un nome azienda molto lungo il blocco titolo cresceva fino a 1322px e
   spingeva TUTTI i comandi sulla riga sotto.
   Con min-width: 0 il titolo va a capo dentro la sua colonna e i comandi
   restano al loro posto. Si applica al blocco che contiene l'intestazione,
   non a tutti i figli: i comandi devono conservare la loro misura.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) :is(
  .az-header, [class$="-head"], [class$="-header"], [class$="-hero"],
  [class$="-head-main"], [class$="-hero-top"], [class$="-toolbar"],
  [class$="-page-header"], [class$="-detail-head"]
) > *:has(:is(h1, h2, h3, h4)) {
  /* min-width da solo NON basta: con flex-wrap il browser decide se mandare
     a capo PRIMA di restringere, usando la larghezza naturale del contenuto.
     Serve una base piccola, cosi' i due blocchi stanno sulla stessa riga e
     il titolo poi cresce fino allo spazio disponibile. */
  flex: 1 1 240px;
  min-width: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) :is(.az-header, [class$="-head"], [class$="-header"], [class$="-hero"], [class$="-toolbar"]) :is(h1, h2, h3, h4) {
  min-width: 0;
  overflow-wrap: break-word;
}


/* =========================================================================
   IL FORM CHE AVVOLGE CORPO E PIEDE
   Il design system fa scorrere .modal-content quando e' figlio DIRETTO
   della scheda. Ma in una modale con form il pulsante di invio deve stare
   dentro il form, quindi il form avvolge corpo e piede — e la catena si
   spezza: niente scorreva, oppure scorreva la scheda intera portandosi via
   testa e piede (era il caso della modale promemoria).
   Qui il form diventa la colonna flessibile e la catena si ricompone.
   ========================================================================= */
body:not(.page-arena-task):not(.page-whatsapp) [class*="modal-card"] > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) [class*="modal-card"] > form > .modal-content {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
body:not(.page-arena-task):not(.page-whatsapp) [class*="modal-card"] > form > [class*="modal-foot"] {
  flex: 0 0 auto;
}
