/* ==========================================================================
   Arcadoo : componenti — 23 settembre 2026
   ==========================================================================
   Ridisegna i componenti che le pagine GIA' usano (Bootstrap 5.1, DataTables
   1.13, Select2 4.1) e aggiunge gli schemi di pagina `.ads-*`.
   Documentazione e stati di ogni componente: DESIGN_SYSTEM.md.

   Regole di questo file
   ---------------------
   - Tutto sta sotto `html.arca-ds`, che layout_base.xml mette su ogni
     pagina. Specificita' (0,2,1) per le classi: batte Bootstrap (0,1,0 /
     0,2,0) senza !important, e perde contro gli stili propri di una pagina
     con un id, che vanno ripuliti nella pagina stessa.
   - Solo token di arca_ds.css: nessun colore scritto qui. E' la condizione
     perche' il tema scuro funzioni.
   - Nessun movimento al passaggio del mouse (Regola del Contenuto Fermo):
     cambiano colore e bordo, mai posizione o misura.
   - Si ridisegna l'ASPETTO. Comportamenti, eventi e markup delle pagine non
     si toccano: e' il vincolo "zero perdita di funzionalita'".
   ========================================================================== */

/* ==========================================================================
   1. Pulsanti
   ========================================================================== */
html.arca-ds .btn {
    --ads-btn-bg: var(--surface);
    --ads-btn-ink: var(--ink-2);
    --ads-btn-bd: var(--line-campo);
    --ads-btn-bg-h: var(--surface-alt);
    --ads-btn-ink-h: var(--ink);
    --ads-btn-bd-h: var(--ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--h-controllo);
    padding: 0 12px;
    font-family: var(--f-ui);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--ads-btn-ink);
    background: var(--ads-btn-bg);
    background-image: none;
    border: 1px solid var(--ads-btn-bd);
    border-radius: var(--r-md);
    box-shadow: none;
    text-shadow: none;
    transform: none;
    transition: background-color var(--t-stato) var(--ease),
                border-color var(--t-stato) var(--ease),
                color var(--t-stato) var(--ease);
}
html.arca-ds .btn:hover {
    color: var(--ads-btn-ink-h);
    background: var(--ads-btn-bg-h);
    border-color: var(--ads-btn-bd-h);
    transform: none;
    box-shadow: none;
}
html.arca-ds .btn:active,
html.arca-ds .btn.active,
html.arca-ds .btn-check:checked + .btn {
    color: var(--accent-soft-ink);
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: none;
}
html.arca-ds .btn:focus { box-shadow: none; }
html.arca-ds .btn:disabled,
html.arca-ds .btn.disabled,
html.arca-ds fieldset:disabled .btn {
    color: var(--ink-disabled);
    background: var(--surface-alt);
    border-color: var(--line);
    opacity: 1;
    cursor: not-allowed;
    pointer-events: none;
}
html.arca-ds .btn i,
html.arca-ds .btn .fa,
html.arca-ds .btn .fas,
html.arca-ds .btn .far { font-size: 0.95em; }

/* Varianti. Il colore dice lo stato, non l'importanza estetica:
   primario (blu) avvia, conferma (verde) conclude, pericolo elimina,
   attenzione apre una verifica. Tutto il resto e' neutro. */
html.arca-ds .btn-primary {
    --ads-btn-bg: var(--accent-fill); --ads-btn-ink: var(--on-accent); --ads-btn-bd: var(--accent-fill);
    --ads-btn-bg-h: var(--accent-fill-hover); --ads-btn-ink-h: var(--on-accent); --ads-btn-bd-h: var(--accent-fill-hover);
}
html.arca-ds .btn-success {
    --ads-btn-bg: var(--azione-fill); --ads-btn-ink: var(--on-azione); --ads-btn-bd: var(--azione-fill);
    --ads-btn-bg-h: var(--azione-fill-hover); --ads-btn-ink-h: var(--on-azione); --ads-btn-bd-h: var(--azione-fill-hover);
}
html.arca-ds .btn-danger {
    --ads-btn-bg: var(--crit-fill); --ads-btn-ink: var(--on-crit); --ads-btn-bd: var(--crit-fill);
    --ads-btn-bg-h: var(--crit-fill-hover); --ads-btn-ink-h: var(--on-crit); --ads-btn-bd-h: var(--crit-fill-hover);
}
html.arca-ds .btn-warning {
    --ads-btn-bg: var(--warn-fill); --ads-btn-ink: var(--on-warn); --ads-btn-bd: var(--warn-fill);
    --ads-btn-bg-h: var(--warn-fill-hover); --ads-btn-ink-h: var(--on-warn); --ads-btn-bd-h: var(--warn-fill-hover);
}
/* info, secondary, light: neutri. Bootstrap li fa azzurro cielo, grigio
   pieno e bianco: tre neutri diversi che non dicevano niente. */
html.arca-ds .btn-info,
html.arca-ds .btn-secondary,
html.arca-ds .btn-light,
html.arca-ds .btn-outline-secondary,
html.arca-ds .btn-outline-dark,
html.arca-ds .btn-outline-light { /* neutro: variabili di base */ }
html.arca-ds .btn-dark {
    --ads-btn-bg: var(--ink); --ads-btn-ink: var(--surface); --ads-btn-bd: var(--ink);
    --ads-btn-bg-h: var(--ink-2); --ads-btn-ink-h: var(--surface); --ads-btn-bd-h: var(--ink-2);
}
/* Contorno colorato: neutri con il testo del loro stato. Servono dove una
   barra ha piu' azioni e solo una e' piena. */
html.arca-ds .btn-outline-primary,
html.arca-ds .btn-outline-info    { --ads-btn-ink: var(--accent);   --ads-btn-ink-h: var(--accent);   --ads-btn-bd-h: var(--accent); }
html.arca-ds .btn-outline-success { --ads-btn-ink: var(--ok-ink);   --ads-btn-ink-h: var(--ok-ink);   --ads-btn-bd-h: var(--ok-ink); }
html.arca-ds .btn-outline-danger  { --ads-btn-ink: var(--crit-ink); --ads-btn-ink-h: var(--crit-ink); --ads-btn-bd-h: var(--crit-ink); --ads-btn-bg-h: var(--crit-soft); }
html.arca-ds .btn-outline-warning { --ads-btn-ink: var(--warn-ink); --ads-btn-ink-h: var(--warn-ink); --ads-btn-bd-h: var(--warn-ink); --ads-btn-bg-h: var(--warn-soft); }
html.arca-ds .btn-link {
    --ads-btn-bg: transparent; --ads-btn-bd: transparent; --ads-btn-ink: var(--accent);
    --ads-btn-bg-h: var(--accent-soft); --ads-btn-bd-h: transparent; --ads-btn-ink-h: var(--accent-soft-ink);
    text-decoration: none;
}
/* Fantasma: comando secondario dentro una riga o una testata. */
html.arca-ds .btn.ads-fantasma {
    --ads-btn-bg: transparent; --ads-btn-bd: transparent;
    --ads-btn-bg-h: var(--surface-alt); --ads-btn-bd-h: var(--line-strong);
}

/* Misure */
html.arca-ds .btn-sm,
html.arca-ds .btn-group-sm > .btn { min-height: 28px; padding: 0 9px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
html.arca-ds .btn-lg,
html.arca-ds .btn-group-lg > .btn { min-height: 40px; padding: 0 18px; font-size: var(--fs-title); }
html.arca-ds .btn.ads-primario { min-height: var(--h-primario); padding: 0 18px; font-weight: 600; }
/* Pulsante solo icona: quadrato, con nome accessibile obbligatorio
   (aria-label; arca_accessibile.js lo ricava da title se manca). */
html.arca-ds .btn.ads-icona { width: var(--h-controllo); padding: 0; }
html.arca-ds .btn-sm.ads-icona { width: 28px; }

/* In corso: il pulsante resta dov'e', la sua etichetta lascia posto a una
   rotella. Si attiva con `aria-busy="true"` o `.is-loading`. */
html.arca-ds .btn[aria-busy="true"],
html.arca-ds .btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
html.arca-ds .btn[aria-busy="true"]::after,
html.arca-ds .btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ads-btn-ink);
    border-right-color: transparent;
    border-radius: 50%;
    animation: ads-gira 0.7s linear infinite;
}
@keyframes ads-gira { to { transform: rotate(360deg); } }

/* Gruppi */
html.arca-ds .btn-group > .btn:not(:first-child),
html.arca-ds .btn-group > .btn-group:not(:first-child) { margin-left: -1px; }
html.arca-ds .btn-group > .btn:hover,
html.arca-ds .btn-group > .btn:focus-visible,
html.arca-ds .btn-group > .btn.active { z-index: 1; }

html.arca-ds .btn-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: var(--r-sm);
    opacity: 0.7;
    background-size: 12px;
}
html.arca-ds .btn-close:hover { opacity: 1; background-color: var(--surface-alt); }
html[data-tema="scuro"].arca-ds .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(200%); }
/* col filtro, il fondo del passaggio diventava un quadrato bianco */
html[data-tema="scuro"].arca-ds .btn-close:not(.btn-close-white):hover { background-color: transparent; opacity: 1; }

/* ==========================================================================
   2. Campi
   ========================================================================== */
html.arca-ds .form-control,
html.arca-ds .form-select,
html.arca-ds .dataTables_wrapper .dataTables_filter input,
html.arca-ds .dataTables_wrapper .dataTables_length select,
html.arca-ds .ads-campo :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),   /* :where: non deve battere .is-invalid */
html.arca-ds .ads-campo select,
html.arca-ds .ads-campo textarea {
    min-height: var(--h-controllo);
    /* Solo il padding verticale: quello orizzontale lo decidono le pagine
       (spazio per la lente di ricerca, per un'unita' di misura). Imporlo qui
       faceva finire la lente sopra il testo. */
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: var(--f-ui);
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line-campo);
    border-radius: var(--r-md);
    box-shadow: none;
    transform: none;
    transition: border-color var(--t-stato) var(--ease), box-shadow var(--t-stato) var(--ease);
}
html.arca-ds textarea.form-control { min-height: 64px; }
html.arca-ds .form-select { padding-right: 30px; background-position: right 9px center; }
html[data-tema="scuro"].arca-ds .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3cad3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html.arca-ds .form-control:hover,
html.arca-ds .form-select:hover { border-color: var(--ink-2); }
html.arca-ds .form-control:focus,
html.arca-ds .form-select:focus,
html.arca-ds .dataTables_wrapper .dataTables_filter input:focus,
html.arca-ds .dataTables_wrapper .dataTables_length select:focus {
    color: var(--ink);
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
    transform: none;
}
html.arca-ds .form-control:disabled,
html.arca-ds .form-select:disabled,
html.arca-ds .form-control[readonly]:not(.ads-cliccabile) {
    color: var(--ink-2);
    background-color: var(--surface-sunken);
    border-color: var(--line-strong);
    opacity: 1;
}
html.arca-ds .form-control:disabled,
html.arca-ds .form-select:disabled { color: var(--ink-disabled); cursor: not-allowed; }
html.arca-ds .form-control-sm,
html.arca-ds .form-select-sm { min-height: 28px; padding-top: 3px; padding-bottom: 3px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
html.arca-ds .form-control-lg,
html.arca-ds .form-select-lg { min-height: 40px; font-size: var(--fs-title); }

/* Validazione: colore piu' icona piu' testo, mai il colore da solo. */
html.arca-ds .form-control.is-invalid,
html.arca-ds .form-select.is-invalid,
html.arca-ds .was-validated .form-control:invalid {
    border-color: var(--crit-fill);
    box-shadow: inset 3px 0 0 var(--crit-fill);
    background-image: none;
    padding-right: 10px;
}
html.arca-ds .form-control.is-invalid:focus,
html.arca-ds .form-select.is-invalid:focus { box-shadow: inset 3px 0 0 var(--crit-fill), 0 0 0 3px var(--crit-soft); }
html.arca-ds .form-control.is-valid,
html.arca-ds .form-select.is-valid { border-color: var(--ok-ink); background-image: none; padding-right: 10px; }
html.arca-ds .invalid-feedback {
    font-size: var(--fs-sm);
    color: var(--crit-ink);
    margin-top: 4px;
}
html.arca-ds .invalid-feedback::before {
    content: "\f06a";                 /* fa-exclamation-circle */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 5px;
}
html.arca-ds .valid-feedback { font-size: var(--fs-sm); color: var(--ok-ink); }
html.arca-ds .form-text { font-size: var(--fs-sm); color: var(--muted); }

html.arca-ds .form-label,
html.arca-ds .col-form-label,
html.arca-ds .ads-etichetta {
    display: inline-block;
    margin-bottom: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
}
html.arca-ds .form-label.ads-normale { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
html.arca-ds .ads-obbligatorio::after { content: " *"; color: var(--crit-ink); }

/* Caselle, radio, interruttori */
html.arca-ds .form-check-input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-color: var(--surface);
    border: 1px solid var(--line-campo);
    box-shadow: none;
}
html.arca-ds .form-check-input:checked {
    background-color: var(--accent-fill);
    border-color: var(--accent-fill);
}
html[data-tema="scuro"].arca-ds .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b1526' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
html.arca-ds .form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
html.arca-ds .form-check-input:disabled { opacity: 0.5; }
html.arca-ds .form-switch .form-check-input { width: 30px; height: 16px; }
html.arca-ds .form-check-label { font-size: var(--fs-body); color: var(--ink); }
html.arca-ds input[type="checkbox"],
html.arca-ds input[type="radio"] { accent-color: var(--accent-fill); }

html.arca-ds .input-group-text {
    min-height: var(--h-controllo);
    padding: 0 10px;
    font-size: var(--fs-body);
    color: var(--muted);
    background: var(--surface-alt);
    border: 1px solid var(--line-campo);
    border-radius: var(--r-md);
}
html.arca-ds .input-group > .form-control,
html.arca-ds .input-group > .form-select,
html.arca-ds .input-group > .btn { min-height: var(--h-controllo); }
html.arca-ds .input-group > .btn { border-color: var(--line-campo); }

/* Select2 (tema bootstrap-5 e predefinito) */
html.arca-ds .select2-container .select2-selection,
html.arca-ds .select2-container--bootstrap-5 .select2-selection {
    min-height: var(--h-controllo);
    font-size: var(--fs-body);
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line-campo);
    border-radius: var(--r-md);
    box-shadow: none;
}
html.arca-ds .select2-container--default .select2-selection--single .select2-selection__rendered,
html.arca-ds .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--h-controllo) - 2px);
    color: var(--ink);
    padding-left: 10px;
}
html.arca-ds .select2-container--focus .select2-selection,
html.arca-ds .select2-container--open .select2-selection {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
html.arca-ds .select2-dropdown {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--ombra-sospeso);
}
html.arca-ds .select2-search__field {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-campo) !important;
    border-radius: var(--r-sm);
}
html.arca-ds .select2-results__option { font-size: var(--fs-body); padding: 6px 10px; }
html.arca-ds .select2-results__option--highlighted,
html.arca-ds .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background: var(--accent-soft) !important;
    color: var(--accent-soft-ink) !important;
}
html.arca-ds .select2-results__option--selected,
html.arca-ds .select2-results__option[aria-selected="true"] { background: var(--surface-alt); color: var(--ink); font-weight: 600; }

/* Elenchi di suggerimenti scritti a mano dalle pagine: stesso aspetto.
   Le pagine che li costruiscono ricevono la classe .ads-suggerimenti. */
html.arca-ds .ads-suggerimenti,
html.arca-ds .autocomplete-dropdown,
html.arca-ds .dropdown-menu {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--ombra-sospeso);
    padding: 4px;
    font-size: var(--fs-body);
}
html.arca-ds .dropdown-item {
    /* Niente flex/gap: le pagine evidenziano parti del nome in <strong> e il
       gap le staccava («Lego legno» per Legolegno). */
    min-height: 30px;
    padding: 4px 10px;
    color: var(--ink);
    border-radius: var(--r-sm);
    transform: none;
}
html.arca-ds .dropdown-item:hover,
html.arca-ds .dropdown-item:focus { background: var(--surface-alt); color: var(--ink); }
html.arca-ds .dropdown-item.active,
html.arca-ds .dropdown-item:active { background: var(--accent-soft); color: var(--accent-soft-ink); }
html.arca-ds .dropdown-item.disabled,
html.arca-ds .dropdown-item:disabled { color: var(--ink-disabled); }
html.arca-ds .dropdown-divider { border-top-color: var(--line); margin: 4px 0; }
html.arca-ds .dropdown-header {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 10px 2px;
}

/* ==========================================================================
   3. Pannelli (card)
   ========================================================================== */
html.arca-ds .card {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: none;
    transform: none;
}
html.arca-ds .card:hover { transform: none; box-shadow: none; }
html.arca-ds .card-header,
html.arca-ds .card-footer {
    padding: 10px 14px;
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
html.arca-ds .card-header { border-radius: var(--r-md) var(--r-md) 0 0; }
html.arca-ds .card-body { padding: 14px; }
html.arca-ds .card-title {
    font-size: var(--fs-title);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
html.arca-ds .card-subtitle,
html.arca-ds .card-text.text-muted { color: var(--muted); }

/* ==========================================================================
   4. Modali
   ========================================================================== */
html.arca-ds .modal-backdrop.show { opacity: 1; background: var(--velo); }
html.arca-ds .modal-content {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--ombra-modale);
    overflow: hidden;
}
/* L'intestazione di una modale e' neutra. Nella v1 ogni pagina la colorava a
   modo suo (sette colori nella sola dashboard manutenzioni) e il titolo
   restava scuro sul colore pieno. Una modale di ESITO dice il suo stato con
   .ads-esito-ok / .ads-esito-errore / .ads-esito-attesa sul .modal-header. */
html.arca-ds .modal-header {
    min-height: 48px;
    padding: 10px 16px;
    background: var(--surface-raised);
    background-image: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}
html.arca-ds .modal-title {
    font-size: var(--fs-subhead);
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
html.arca-ds .modal-header .btn-close-white { filter: none; }
html[data-tema="scuro"].arca-ds .modal-header .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }
html.arca-ds .modal-body { padding: 16px; }
html.arca-ds .modal-footer {
    padding: 10px 16px;
    gap: 8px;
    background: var(--surface-alt);
    border-top: 1px solid var(--line);
}
html.arca-ds .modal-footer > * { margin: 0; }
html.arca-ds .modal-header.ads-esito-ok      { background: var(--ok-soft);   border-bottom-color: var(--ok-ink); }
html.arca-ds .modal-header.ads-esito-errore  { background: var(--crit-soft); border-bottom-color: var(--crit-ink); }
html.arca-ds .modal-header.ads-esito-attesa  { background: var(--warn-soft); border-bottom-color: var(--warn-ink); }
html.arca-ds .modal-header.ads-esito-ok .modal-title,
html.arca-ds .modal-header.ads-esito-ok .modal-title i     { color: var(--ok-ink); }
html.arca-ds .modal-header.ads-esito-errore .modal-title,
html.arca-ds .modal-header.ads-esito-errore .modal-title i { color: var(--crit-ink); }
html.arca-ds .modal-header.ads-esito-attesa .modal-title,
html.arca-ds .modal-header.ads-esito-attesa .modal-title i { color: var(--warn-ink); }

/* ==========================================================================
   5. Tabelle e DataTables
   ========================================================================== */
html.arca-ds .table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: var(--surface-alt);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: var(--accent-soft);
    --bs-table-hover-color: var(--ink);
    --bs-table-active-bg: var(--accent-soft);
    color: var(--ink);
    border-color: var(--line);
    font-size: var(--fs-body);
    margin-bottom: 0;
}
html.arca-ds .table > :not(caption) > * > * {
    padding: 5px 8px;
    color: inherit;
    background-color: var(--bs-table-bg);
    border-bottom-color: var(--line);
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    vertical-align: middle;
}
html.arca-ds .table > thead th,
html.arca-ds .table > thead td,
html.arca-ds .table thead.table-light th,
html.arca-ds .table thead.table-dark th,
html.arca-ds .table-dark > thead th {
    /* Niente height: DataTables mette box-sizing: content-box sulle celle e,
       in modalita' standard, 30 px di altezza + padding davano 44 px. La
       misura la fanno padding e interlinea (~30 px). */
    padding: 8px 8px;
    line-height: 1.2;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-alt);
    background-image: none;
    border-top: 0;
    border-bottom: 1.5px solid var(--line-strong);
    white-space: nowrap;
    vertical-align: middle;
}
html.arca-ds .table > thead th i { color: inherit; }
html.arca-ds .table > tbody > tr { transform: none; transition: background-color var(--t-stato) var(--ease); }
html.arca-ds .table > tbody > tr:hover { transform: none; box-shadow: none; }
html.arca-ds .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--accent-soft); color: var(--ink); }
html.arca-ds .table-bordered > :not(caption) > * > * { border-color: var(--line); }
html.arca-ds .table-sm > :not(caption) > * > * { padding: 3px 6px; }
html.arca-ds .table td.ads-num,
html.arca-ds .table th.ads-num { text-align: right; font-family: var(--f-dato); }
html.arca-ds .table-responsive { border-radius: var(--r-md); }

/* Righe di stato: tinta tenue, mai piena. */
html.arca-ds .table-success, html.arca-ds tr.table-success > * { --bs-table-bg: var(--ok-soft);   --bs-table-accent-bg: transparent; color: var(--ink); }
html.arca-ds .table-warning, html.arca-ds tr.table-warning > * { --bs-table-bg: var(--warn-soft); --bs-table-accent-bg: transparent; color: var(--ink); }
html.arca-ds .table-danger,  html.arca-ds tr.table-danger > *  { --bs-table-bg: var(--crit-soft); --bs-table-accent-bg: transparent; color: var(--ink); }
html.arca-ds .table-info,    html.arca-ds tr.table-info > *,
html.arca-ds .table-primary, html.arca-ds tr.table-primary > * { --bs-table-bg: var(--accent-soft); --bs-table-accent-bg: transparent; color: var(--ink); }
html.arca-ds .table-secondary, html.arca-ds .table-light,
html.arca-ds tr.table-secondary > *, html.arca-ds tr.table-light > * { --bs-table-bg: var(--surface-alt); color: var(--ink); }

/* DataTables: controlli, piede, paginazione */
html.arca-ds .dataTables_wrapper { color: var(--ink); font-size: var(--fs-body); }
html.arca-ds .dataTables_wrapper .dataTables_length,
html.arca-ds .dataTables_wrapper .dataTables_filter,
html.arca-ds .dataTables_wrapper .dataTables_info { font-size: var(--fs-sm); color: var(--muted); }
html.arca-ds .dataTables_wrapper .dataTables_info { padding-top: 8px; }
html.arca-ds .dataTables_wrapper .dataTables_filter input { margin-left: 6px; min-width: 200px; }
html.arca-ds .dataTables_wrapper .dataTables_length select { margin: 0 4px; padding-right: 26px; }
html.arca-ds table.dataTable td.dataTables_empty,
html.arca-ds .dataTables_empty {
    padding: 28px 12px !important;
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-body);
    background: var(--surface);
}
html.arca-ds table.dataTable thead > tr > th.sorting::before,
html.arca-ds table.dataTable thead > tr > th.sorting::after,
html.arca-ds table.dataTable thead > tr > th.sorting_asc::before,
html.arca-ds table.dataTable thead > tr > th.sorting_asc::after,
html.arca-ds table.dataTable thead > tr > th.sorting_desc::before,
html.arca-ds table.dataTable thead > tr > th.sorting_desc::after { color: var(--muted); }
html.arca-ds table.dataTable thead > tr > th.sorting_asc,
html.arca-ds table.dataTable thead > tr > th.sorting_desc { color: var(--ink); }
html.arca-ds .dataTables_wrapper .dataTables_processing {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--ombra-sospeso);
}
html.arca-ds table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px var(--accent-soft); color: var(--ink); }

/* Paginazione (Bootstrap e DataTables) */
html.arca-ds .pagination { gap: 2px; margin: 0; }
html.arca-ds .page-link,
html.arca-ds .dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item) {
    /* :not(.page-item): con lo stile bootstrap5 di DataTables il pulsante e'
       un <li class="page-item"> con dentro un .page-link; bordare entrambi
       faceva il doppio riquadro. */
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: var(--fs-sm);
    color: var(--ink-2) !important;
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: none !important;
    transform: none !important;
}
html.arca-ds .page-link:hover,
html.arca-ds .dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):hover {
    color: var(--ink) !important;
    background: var(--surface-alt) !important;
    border-color: var(--ink-2) !important;
}
html.arca-ds .page-item.active .page-link,
html.arca-ds .dataTables_wrapper .dataTables_paginate .paginate_button.current:not(.page-item),
html.arca-ds .dataTables_wrapper .dataTables_paginate .paginate_button.current > .page-link {
    color: var(--accent-soft-ink) !important;
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    font-weight: 600;
}
html.arca-ds .page-item.disabled .page-link,
html.arca-ds .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:not(.page-item),
html.arca-ds .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > .page-link {
    color: var(--ink-disabled) !important;
    background: var(--surface-alt) !important;
    border-color: var(--line) !important;
}
html.arca-ds .page-item:first-child .page-link,
html.arca-ds .page-item:last-child .page-link { border-radius: var(--r-sm); }

/* Pulsanti di esportazione di DataTables (buttons-csv, buttons-excel, ...):
   neutri, alla stessa altezza dei controlli. */
html.arca-ds .dt-buttons .btn,
html.arca-ds .btn.buttons-csv,
html.arca-ds .btn.buttons-excel,
html.arca-ds .btn.buttons-pdf,
html.arca-ds .btn.buttons-print,
html.arca-ds .btn.buttons-copy,
html.arca-ds .btn.buttons-colvis {
    --ads-btn-bg: var(--surface); --ads-btn-ink: var(--ink-2); --ads-btn-bd: var(--line-campo);
    --ads-btn-bg-h: var(--surface-alt); --ads-btn-ink-h: var(--ink); --ads-btn-bd-h: var(--ink-2);
}

/* ==========================================================================
   6. Pastiglie di stato (badge)
   ==========================================================================
   Tinta tenue con il testo scuro dello stesso stato: 4,5:1 garantito da
   verifica_contrasti.py. Un badge pieno bianco-su-colore non passava quasi
   mai (bianco su #28a745: 3,1:1). */
html.arca-ds .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
    padding: 2px 7px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border-radius: var(--r-pill);
    color: var(--ink-2);
    background: var(--surface-alt);
    border: 1px solid var(--line-strong);
    animation: none;
}
html.arca-ds .badge.bg-primary, html.arca-ds .badge.text-bg-primary,
html.arca-ds .badge.bg-info,    html.arca-ds .badge.text-bg-info,
html.arca-ds .ads-pastiglia--info    { background: var(--accent-soft) !important; color: var(--accent-soft-ink) !important; border-color: transparent; }
html.arca-ds .badge.bg-success, html.arca-ds .badge.text-bg-success,
html.arca-ds .ads-pastiglia--ok      { background: var(--ok-soft) !important;   color: var(--ok-ink) !important;   border-color: transparent; }
html.arca-ds .badge.bg-warning, html.arca-ds .badge.text-bg-warning,
html.arca-ds .ads-pastiglia--attesa  { background: var(--warn-soft) !important; color: var(--warn-ink) !important; border-color: transparent; }
html.arca-ds .badge.bg-danger,  html.arca-ds .badge.text-bg-danger,
html.arca-ds .ads-pastiglia--errore  { background: var(--crit-soft) !important; color: var(--crit-ink) !important; border-color: transparent; }
html.arca-ds .badge.bg-secondary, html.arca-ds .badge.bg-light, html.arca-ds .badge.bg-dark,
html.arca-ds .badge.text-bg-secondary, html.arca-ds .badge.text-bg-light, html.arca-ds .badge.text-bg-dark,
html.arca-ds .ads-pastiglia--neutro  { background: var(--surface-alt) !important; color: var(--ink-2) !important; border-color: var(--line-strong); }
html.arca-ds .badge.rounded-pill { border-radius: var(--r-pill); }
/* Il conteggio dentro un pulsante (es. "Filtri 2") */
html.arca-ds .btn .badge { min-height: 18px; padding: 0 6px; }

.ads-pastiglia {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 2px 8px;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.ads-pastiglia::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ads-pastiglia.ads-senza-punto::before { display: none; }

/* ==========================================================================
   7. Avvisi (alert) e notifiche (toast)
   ========================================================================== */
html.arca-ds .alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--surface-alt);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: none;
    /* assets_common.xml fa entrare ogni .alert da destra (slideInRight): per un
       attimo la pagina scorre in orizzontale e il contenuto si sposta. */
    animation: none;
}
html.arca-ds .alert > i:first-child { margin-top: 2px; }
html.arca-ds .alert-primary, html.arca-ds .alert-info  { background: var(--info-soft); border-color: transparent; color: var(--ink); }
html.arca-ds .alert-primary > i:first-child, html.arca-ds .alert-info > i:first-child { color: var(--info-ink); }
html.arca-ds .alert-success { background: var(--ok-soft);   border-color: transparent; color: var(--ink); }
html.arca-ds .alert-success > i:first-child { color: var(--ok-ink); }
html.arca-ds .alert-warning { background: var(--warn-soft); border-color: transparent; color: var(--ink); }
html.arca-ds .alert-warning > i:first-child { color: var(--warn-ink); }
html.arca-ds .alert-danger  { background: var(--crit-soft); border-color: transparent; color: var(--ink); }
html.arca-ds .alert-danger > i:first-child { color: var(--crit-ink); }
html.arca-ds .alert-secondary, html.arca-ds .alert-light, html.arca-ds .alert-dark { background: var(--surface-alt); color: var(--ink); }
html.arca-ds .alert .alert-link { color: inherit; text-decoration: underline; font-weight: 600; }
html.arca-ds .alert .btn-close { margin-left: auto; }

html.arca-ds .toast {
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--ombra-sospeso);
}
html.arca-ds .toast-header {
    color: var(--ink);
    background: var(--surface-alt);
    border-bottom-color: var(--line);
}

/* Notifica di sistema del gestionale (ArcaUI.avviso): angolo in basso a
   destra, sopra il lavoro, con ruolo "status"/"alert" per il lettore di
   schermo. Il colore sta in un filo sottile e nell'icona, il testo resta
   Inchiostro. */
.ads-avvisi {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--z-avviso);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.ads-avviso {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--ink);
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--ombra-sospeso);
    animation: ads-entra var(--t-pannello) var(--ease);
}
.ads-avviso__icona { font-size: 16px; line-height: 20px; color: var(--accent); }
.ads-avviso--ok .ads-avviso__icona     { color: var(--ok-ink); }
.ads-avviso--attesa .ads-avviso__icona { color: var(--warn-ink); }
.ads-avviso--errore .ads-avviso__icona { color: var(--crit-ink); }
.ads-avviso--errore { border-color: var(--crit-ink); }
.ads-avviso__titolo { font-weight: 600; display: block; }
.ads-avviso__chiudi {
    width: 24px; height: 24px; border: 0; padding: 0; background: transparent;
    color: var(--muted); border-radius: var(--r-sm); cursor: pointer;
}
.ads-avviso__chiudi:hover { background: var(--surface-alt); color: var(--ink); }
@keyframes ads-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   8. Schede (tab), pillole, fisarmonica, elenchi
   ========================================================================== */
html.arca-ds .nav-tabs {
    gap: 2px;
    border-bottom: 1px solid var(--line-strong);
}
html.arca-ds .nav-tabs .nav-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    transform: none;
}
html.arca-ds .nav-tabs .nav-link:hover { color: var(--ink); background: var(--surface-alt); border-bottom-color: var(--line-strong); }
html.arca-ds .nav-tabs .nav-link.active,
html.arca-ds .nav-tabs .nav-item.show .nav-link {
    color: var(--ink);
    font-weight: 600;
    background: transparent;
    border-bottom-color: var(--accent);
}
html.arca-ds .nav-pills .nav-link {
    min-height: var(--h-controllo);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: var(--fs-body);
    color: var(--ink-2);
    border-radius: var(--r-md);
}
html.arca-ds .nav-pills .nav-link:hover { background: var(--surface-alt); color: var(--ink); }
html.arca-ds .nav-pills .nav-link.active { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; }

html.arca-ds .accordion-item { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
html.arca-ds .accordion-button {
    min-height: 40px;
    padding: 8px 14px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    box-shadow: none;
}
html.arca-ds .accordion-button:not(.collapsed) { color: var(--ink); background: var(--surface-alt); box-shadow: inset 0 -1px 0 var(--line); }
html.arca-ds .accordion-button:focus { box-shadow: none; border-color: var(--line); }
html[data-tema="scuro"].arca-ds .accordion-button::after { filter: invert(1) grayscale(100%) brightness(180%); }

html.arca-ds .list-group-item {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
    font-size: var(--fs-body);
    padding: 8px 12px;
}
html.arca-ds .list-group-item-action:hover,
html.arca-ds .list-group-item-action:focus { background: var(--surface-alt); color: var(--ink); }
html.arca-ds .list-group-item.active { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: var(--line); }

html.arca-ds .progress { height: 6px; background: var(--surface-sunken); border-radius: var(--r-pill); }
html.arca-ds .progress-bar { background: var(--accent-fill); }
html.arca-ds .progress-bar.bg-success { background: var(--azione-fill) !important; }
html.arca-ds .progress-bar.bg-warning { background: var(--warn-fill) !important; }
html.arca-ds .progress-bar.bg-danger  { background: var(--crit-fill) !important; }
html.arca-ds .spinner-border { color: var(--accent); }

html.arca-ds .tooltip .tooltip-inner {
    max-width: 280px;
    padding: 5px 8px;
    font-size: var(--fs-sm);
    color: var(--surface);
    background: var(--ink);
    border-radius: var(--r-sm);
}
html.arca-ds .popover { background: var(--surface-raised); border-color: var(--line-strong); box-shadow: var(--ombra-sospeso); }
html.arca-ds .popover-header { background: var(--surface-alt); color: var(--ink); border-bottom-color: var(--line); font-size: var(--fs-body); }
html.arca-ds .popover-body { color: var(--ink); font-size: var(--fs-body); }
html.arca-ds .offcanvas { background: var(--surface-raised); color: var(--ink); }

/* ==========================================================================
   9. Utilita' di Bootstrap ricondotte ai token
   ==========================================================================
   Servono al tema scuro: .bg-white, .bg-light, .text-dark e compagnia sono
   scritti nel markup di quasi tutte le pagine. Qui diventano superfici e
   inchiostri del sistema, cosi' in scuro non restano isole bianche. */
html.arca-ds .bg-white,
html.arca-ds .bg-body   { background-color: var(--surface) !important; }
html.arca-ds .bg-light  { background-color: var(--surface-alt) !important; }
html.arca-ds .text-dark,
html.arca-ds .text-body,
html.arca-ds .text-black { color: var(--ink) !important; }
html.arca-ds .text-muted,
html.arca-ds .text-secondary,
html.arca-ds .text-black-50 { color: var(--muted) !important; }
html.arca-ds .text-primary { color: var(--accent) !important; }
html.arca-ds .text-info    { color: var(--info-ink) !important; }
html.arca-ds .text-success { color: var(--ok-ink) !important; }
html.arca-ds .text-warning { color: var(--warn-ink) !important; }   /* giallo su bianco: 1,6:1 → 6,4:1 */
html.arca-ds i.text-warning,
html.arca-ds .fa.text-warning,
html.arca-ds .fas.text-warning,
html.arca-ds .far.text-warning { color: var(--warn-icon) !important; }   /* icone: restano gialle */
html.arca-ds .text-danger  { color: var(--crit-ink) !important; }
html.arca-ds .border,
html.arca-ds .border-top,
html.arca-ds .border-bottom,
html.arca-ds .border-start,
html.arca-ds .border-end { border-color: var(--line) !important; }
html.arca-ds .shadow,
html.arca-ds .shadow-sm,
html.arca-ds .shadow-lg { box-shadow: none !important; }
/* Superfici piene di stato usate come fondo di pannelli e testate: tinta
   tenue con testo scuro. Il testo bianco al 50% (.text-white-50) su queste
   tinte non si leggeva (1,8-2,4:1). */
html.arca-ds .bg-primary:not(.badge):not(.progress-bar),
html.arca-ds .bg-info:not(.badge):not(.progress-bar)    { background-color: var(--accent-soft) !important; color: var(--ink) !important; }
html.arca-ds .bg-success:not(.badge):not(.progress-bar) { background-color: var(--ok-soft) !important;     color: var(--ink) !important; }
html.arca-ds .bg-warning:not(.badge):not(.progress-bar) { background-color: var(--warn-soft) !important;   color: var(--ink) !important; }
html.arca-ds .bg-danger:not(.badge):not(.progress-bar)  { background-color: var(--crit-soft) !important;   color: var(--ink) !important; }
html.arca-ds .bg-secondary:not(.badge):not(.progress-bar),
html.arca-ds .bg-dark:not(.badge):not(.progress-bar)    { background-color: var(--surface-alt) !important; color: var(--ink) !important; }
html.arca-ds .bg-primary .text-white, html.arca-ds .bg-primary .text-white-50,
html.arca-ds .bg-info .text-white,    html.arca-ds .bg-info .text-white-50,
html.arca-ds .bg-success .text-white, html.arca-ds .bg-success .text-white-50,
html.arca-ds .bg-warning .text-white, html.arca-ds .bg-warning .text-white-50,
html.arca-ds .bg-danger .text-white,  html.arca-ds .bg-danger .text-white-50,
html.arca-ds .bg-secondary .text-white, html.arca-ds .bg-dark .text-white { color: var(--ink) !important; }
/* .text-white-50 da solo NON si tocca: sulle fasce colorate delle pagine
   non ridisegnate e' testo chiaro su colore, e renderlo grigio lo spegneva
   (verifica Fase 5, MDB-013, CPT-004). */

/* ==========================================================================
   10. Schemi di pagina — da usare nelle pagine ridisegnate
   ========================================================================== */

/* --- Contenitore di pagina ------------------------------------------------ */
.ads-pagina {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 24px;
    min-width: 0;
}
@media (max-width: 767.98px) { .ads-pagina { padding: 10px 12px 20px; } }

/* --- Testata di pagina -----------------------------------------------------
   Titolo (uno per schermata), eventuale contatore o stato, azioni a destra.
   Sostituisce le fasce sfumate alte fino a 400 px. */
.ads-testata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    min-height: var(--h-testata);
    padding: 4px 0;
}
.ads-testata__titoli { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; flex: 1 1 280px; }
.ads-testata__titolo {
    margin: 0;
    font-size: var(--fs-headline);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}
.ads-testata__titolo i { color: var(--muted); font-size: 0.85em; margin-right: 6px; }
.ads-testata__sotto { font-size: var(--fs-sm); color: var(--muted); }
.ads-testata__azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* --- Barra comandi ------------------------------------------------------- */
.ads-comandi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
}
.ads-comandi__cerca { flex: 1 1 240px; min-width: 180px; position: relative; }
.ads-comandi__cerca > i,
.ads-comandi__cerca > .ads-comandi__lente {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none; font-size: 13px;
}
.ads-comandi__cerca input { width: 100%; padding-left: 30px !important; }
.ads-comandi__spazio { flex: 1 1 auto; }

/* --- Pannello ------------------------------------------------------------ */
.ads-pannello {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    min-width: 0;
}
.ads-pannello__testa {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    min-height: 42px; padding: 6px 14px;
    border-bottom: 1px solid var(--line);
}
.ads-pannello__titolo { margin: 0; font-size: var(--fs-title); font-weight: 600; color: var(--ink); }
.ads-pannello__corpo { padding: 14px; }
.ads-pannello__piede {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    padding: 8px 14px; background: var(--surface-alt); border-top: 1px solid var(--line);
    border-radius: 0 0 var(--r-md) var(--r-md);
}

/* --- Griglia di campi (moduli) ------------------------------------------- */
.ads-griglia-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 14px;
}
.ads-campo { display: flex; flex-direction: column; min-width: 0; }
.ads-campo--largo { grid-column: 1 / -1; }

/* --- Barra d'azione fissa in fondo a un modulo --------------------------- */
.ads-barra-azioni {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--surface);
    border-top: 1px solid var(--line-strong);
    box-shadow: var(--ombra-fluttua);
}

/* --- Indicatore (KPI) ------------------------------------------------------
   Un indicatore che porta a un elenco e' un PULSANTE o un link, non un div:
   si raggiunge da tastiera e si annuncia. Il colore di stato sta solo nel
   filo sinistro da 3 px e nell'etichetta di stato. */
.ads-indicatori { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ads-kpi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; min-height: 76px; padding: 10px 14px;
    text-align: left; font: inherit; color: var(--ink); text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--r-md);
    cursor: default;
}
a.ads-kpi, button.ads-kpi { cursor: pointer; }
a.ads-kpi:hover, button.ads-kpi:hover { background: var(--surface-alt); border-color: var(--ink-2); color: var(--ink); }
.ads-kpi__etichetta { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.ads-kpi__valore { font-family: var(--f-dato); font-size: var(--fs-display); font-weight: 600; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ads-kpi__nota { font-size: var(--fs-sm); color: var(--muted); }
.ads-kpi--ok     { border-left-color: var(--ok-ink); }
.ads-kpi--attesa { border-left-color: var(--warn-fill); }
.ads-kpi--errore { border-left-color: var(--crit-fill); }
.ads-kpi--info   { border-left-color: var(--accent); }

/* --- Stato vuoto: dice cosa fare ------------------------------------------ */
.ads-vuoto {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 32px 16px;
    text-align: center;
    color: var(--muted);
}
.ads-vuoto__icona { font-size: 22px; color: var(--line-campo); }
.ads-vuoto__titolo { font-size: var(--fs-title); font-weight: 600; color: var(--ink); margin: 0; }
.ads-vuoto__testo { font-size: var(--fs-body); max-width: 52ch; margin: 0; }
.ads-vuoto .btn { margin-top: 6px; }

/* --- Stato di errore: dice cosa e' successo e come rimediare --------------- */
.ads-errore {
    display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px;
    padding: 12px 14px;
    color: var(--ink);
    background: var(--crit-soft);
    border: 1px solid transparent;
    border-radius: var(--r-md);
}
.ads-errore > i { color: var(--crit-ink); margin-top: 2px; }
.ads-errore__titolo { font-weight: 600; margin: 0; }
.ads-errore__testo { grid-column: 2; font-size: var(--fs-body); margin: 0; }
.ads-errore__azioni { grid-column: 2; display: flex; gap: 8px; margin-top: 6px; }

/* --- Elenco a schede per telefono (sostituisce la tabella sotto 768 px) --- */
.ads-schede { display: flex; flex-direction: column; gap: 8px; }
.ads-scheda {
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
}
.ads-scheda__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ads-scheda__titolo { font-weight: 600; color: var(--ink); }
.ads-scheda__dati { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: var(--fs-sm); }
.ads-scheda__dati dt { color: var(--muted); font-weight: 500; }
.ads-scheda__dati dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ads-scheda__azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* --- Riga di definizioni (dettagli in un pannello o in una modale) -------- */
.ads-definizioni { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 14px; margin: 0; }
.ads-definizioni dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.ads-definizioni dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* --- Contenitore che scorre in orizzontale (tabelle larghe su telefono) --- */
.ads-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* --- Collegamento esterno ------------------------------------------------- */
.ads-esterno::after {
    content: "\f35d";                  /* fa-external-link-alt */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72em;
    margin-left: 5px;
    opacity: 0.75;
}

/* ==========================================================================
   11. Movimento: nessuna superficie si muove al passaggio del mouse
   ==========================================================================
   Molte pagine (e assets_common.xml) sollevano card, pulsanti e righe con
   translateY/scale al :hover. Qui si annulla per tutti, nel layer che vince
   sugli !important preesistenti. */
@layer arca-forza {
    /* datatables_enhanced e alcune pagine danno bordo e padding (!important)
       al <li class="paginate_button page-item">: col .page-link dentro
       faceva il doppio riquadro. Il pulsante e' il .page-link. */
    html.arca-ds .dataTables_wrapper .dataTables_paginate li.paginate_button.page-item {
        padding: 0 !important;
        margin: 0 1px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}
@layer arca-forza {
    html.arca-ds .card:hover,
    html.arca-ds .btn:hover,
    html.arca-ds .feature-card:hover,
    html.arca-ds .stat-card:hover,
    html.arca-ds .kpi-card:hover,
    html.arca-ds .dashboard-card:hover,
    html.arca-ds .table tbody tr:hover,
    html.arca-ds .list-group-item:hover,
    html.arca-ds .dropdown-item:hover,
    html.arca-ds .user-menu-item:hover,
    html.arca-ds .form-control:focus,
    html.arca-ds .form-select:focus { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    html.arca-ds *,
    html.arca-ds *::before,
    html.arca-ds *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}