/* ==========================================================================
   app.css — Formazione Erogata
   Reset + tipografia + chrome + utility + component base. Legge i token
   da tokens.css. I nomi di classe/ID load-bearing NON vanno rinominati.
   ========================================================================== */

/* --------------------------------------------------------------- Reset base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: var(--header-h) 0 var(--footer-h) 0;
    font-family: var(--font-sans);
    font-size: var(--fs-300);
    line-height: var(--lh-normal);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

/* form/table ereditano font (evita che le librerie reintroducano size propri) */
input, button, select, textarea, table, th, td {
    font-family: inherit;
    font-size: inherit;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; }

img { max-width: 100%; }

:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }

/* Sfondo differenziato per admin (sostituisce l'hack css/admin.php) */
body.is-admin { --c-bg: var(--c-surface-2); }

/* -------------------------------------------------------------- Tipografia  */
.bold      { font-weight: var(--fw-bold); }
.italic    { font-style: italic; }
.monospace { font-family: var(--font-mono); }
.grayedOut { color: var(--c-text-muted); }
.page_title { text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--fw-medium); }

th div, th { text-align: center; }

/* ------------------------------------------------------------------ Chrome  */
/* Header fisso in alto */
.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--sh-1);
}
/* il logo si scambia col tema tramite il token --logo-src (versione chiara/scura).
   contain = mai deformato, anche se le due varianti hanno proporzioni leggermente diverse */
.header .logo {
    flex: 0 0 auto;
    height: 36px;
    aspect-ratio: 1200 / 377;
    background: left center / contain no-repeat var(--logo-src);
}
.header .page_title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-400);
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toggle tema chiaro/scuro */
.theme-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-raised);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); background: var(--c-surface-3); }
.theme-toggle .ico  { width: 18px; height: 18px; --icon-src: var(--icon-theme); }

/* Footer fisso in basso */
.app-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--footer-h);
    z-index: var(--z-footer);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--sp-4);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-100);
    color: var(--c-text-faint);
}

/* Contenitore contenuto pagina */
.page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-4);
}

/* ------------------------------------------------------------- Tile / .app  */
.app {
    display: inline-block;
    vertical-align: top;
    min-width: 100px;
    min-height: 72px;
    padding: var(--sp-2) var(--sp-3);
    margin: 0 var(--sp-2) var(--sp-2) 0;
    background: var(--c-raised);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    cursor: pointer;
    text-align: center;
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    user-select: none;
    transition: border-color .15s, box-shadow .15s, transform .05s, color .15s;
}
.app:hover  { border-color: var(--c-accent); box-shadow: var(--sh-2); color: var(--c-accent); text-decoration: none; }
.app:active { transform: translateY(1px); }
/* icona sopra, etichetta sotto (il markup usa <icona><br>Etichetta, con <br> anche dentro l'etichetta) */
.app .ico { width: 24px; height: 24px; margin-bottom: var(--sp-1); }
.app img  { width: 24px; height: 24px; object-fit: contain; margin-bottom: var(--sp-1); }

/* ------------------------------------------------------------ Icone (SVG)   */
/* SVG monocromatiche via mask: seguono currentColor (quindi anche il tema) */
.ico {
    display: inline-block;
    background: currentColor;
    -webkit-mask: center / contain no-repeat var(--icon-src);
    mask: center / contain no-repeat var(--icon-src);
    vertical-align: middle;
}
.ico-add      { --icon-src: url("/img/ic-add.svg"); }
.ico-attach   { --icon-src: url("/img/ic-attach.svg"); }
.ico-company  { --icon-src: url("/img/ic-company.svg"); }
.ico-courses  { --icon-src: url("/img/ic-courses.svg"); }
.ico-template { --icon-src: url("/img/ic-template.svg"); }
.ico-import   { --icon-src: url("/img/ic-import.svg"); }
.ico-excel    { --icon-src: url("/img/ic-excel.svg"); }
.ico-pdf      { --icon-src: url("/img/ic-pdf.svg"); }
.ico-survey   { --icon-src: url("/img/ic-survey.svg"); }
.ico-lock     { --icon-src: url("/img/ic-lock.svg"); }
.ico-arrow    { --icon-src: url("/img/ic-arrow.svg"); }
.ico-alert    { --icon-src: url("/img/ic-alert.svg"); }
/* varianti dimensione */
.ico-sm    { width: 16px; height: 16px; vertical-align: -0.2em; color: var(--c-text-muted); }
.lock-ico  { width: 28px; height: 28px; color: var(--c-text-faint); }
.alert-ico { width: 40px; height: 40px; color: var(--c-danger); }
.ico-arrow { width: 12px; height: 12px; color: var(--c-text-muted); }

/* ------------------------------------------------------------------- Tabs   */
.tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--c-border);
    margin: var(--sp-3) 0 var(--sp-4) 0;
    overflow-x: auto;
    /* con overflow-x:auto l'overflow-y diventa auto per specifica: senza questo
       basta 1px (il margin-bottom negativo dei tab) per far comparire la barra verticale */
    overflow-y: hidden;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge legacy */
}
/* barra orizzontale nascosta: su mobile i tab restano comunque scorrevoli con swipe */
.tab-list::-webkit-scrollbar { display: none; }
.tab {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: var(--sp-2) var(--sp-4);
    font-family: inherit;
    font-size: var(--fs-300);
    font-weight: var(--fw-medium);
    color: var(--c-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--c-text); }
.tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.tab-panel { padding-top: var(--sp-1); }
@media (max-width: 768px) { .tab-list { flex-wrap: nowrap; } }

/* --------------------------------------------------- Sezioni collassabili   */
.mytitle {
    width: 100%;
    margin: var(--sp-3) 0 var(--sp-2) 0;
}
.mytitle > table,
.mytitle .section-bar {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font-weight: var(--fw-medium);
    box-shadow: var(--sh-1);
}
.mytitle .pointer:hover { border-color: var(--c-border-strong); }

.divOpened, .divClosed, .pointer { cursor: pointer; }

/* ----------------------------------------------------- Campi inline-edit    */
.userdata {
    padding: var(--sp-1) var(--sp-2);
    min-height: 1.9em;
    border-radius: var(--r-sm);
}
.userdata:hover { background: var(--c-surface-2); }
.bottomline { border-bottom: 1px solid var(--c-border-strong); }

/* --------------------------------------------------------- Utility tabelle  */
.smallcol { width: 1px; text-align: center; white-space: nowrap; }
.nowrap   { white-space: nowrap; }

/* Righe presenza (semaforo) — fondi tenui, niente verde/rosso acceso */
.personaAssente            { background-color: var(--c-danger-soft) !important; }
.personaAssente:hover      { background-color: var(--c-danger-soft-2) !important; }
.personaAssente .sorting_1,
.personaAssente .sorting_2,
.personaAssente .sorting_3 { background-color: var(--c-danger-soft-2) !important; }

.personaPresente            { background-color: var(--c-success-soft) !important; }
.personaPresente:hover      { background-color: var(--c-success-soft-2) !important; }
.personaPresente .sorting_1,
.personaPresente .sorting_2,
.personaPresente .sorting_3 { background-color: var(--c-success-soft-2) !important; }

.rowDisabled td { color: var(--c-text-faint) !important; font-style: italic; }

#tabellaModificaPartecipanti,
#tabellaModificaPartecipanti td,
#tabellaModificaPartecipanti th { font-size: var(--fs-100); }

/* ----------------------------------------- jQuery UI / notify (transitori)  */
.ui-dialog-titlebar-close { display: none; }
.notifyjs-corner { top: calc(var(--header-h) + var(--sp-2)) !important; z-index: var(--z-notify) !important; }

/* Icone azione: le ui-icon usate (pencil/trash/disk) diventano SVG mascherate,
   colorabili con currentColor. Solo queste 3 classi, per non toccare altre ui-icon. */
.ui-icon-pencil, .ui-icon-trash, .ui-icon-disk {
    display: inline-block;
    width: 16px; height: 16px;
    background: currentColor;
    -webkit-mask: center / contain no-repeat var(--icon-src);
    mask: center / contain no-repeat var(--icon-src);
    text-indent: 0;
    vertical-align: -0.2em;
    color: var(--c-text-muted);
}
.ui-icon-pencil { --icon-src: url("/img/ic-edit.svg"); }
.ui-icon-trash  { --icon-src: url("/img/ic-trash.svg"); }
.ui-icon-disk   { --icon-src: url("/img/ic-download.svg"); }

/* link-icona nelle tabelle/schede: accento in hover, niente sottolineatura */
a:has(.ui-icon-pencil, .ui-icon-trash, .ui-icon-disk, .ico) { text-decoration: none; }
a:hover  .ui-icon-pencil, a:hover  .ui-icon-trash, a:hover  .ui-icon-disk, a:hover  .ico-sm,
a:focus  .ui-icon-pencil, a:focus  .ui-icon-trash, a:focus  .ui-icon-disk, a:focus  .ico-sm { color: var(--c-accent); }

/* ------------------------------------------------------- DataTables (base)  */
.dataTables_wrapper { color: var(--c-text); margin-top: var(--sp-2); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-200); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 4px 8px;
    margin-left: 6px;
    background: var(--c-surface);
    color: var(--c-text);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: none; border-color: var(--c-accent); box-shadow: var(--sh-focus);
}

table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
}
table.dataTable thead th,
table.dataTable thead td {
    background: var(--c-surface-2);
    color: var(--c-text);
    font-weight: var(--fw-medium);
    border-bottom: 1px solid var(--c-border) !important;
    padding: var(--sp-2) var(--sp-3);
}
table.dataTable tbody td { padding: var(--sp-2) var(--sp-3); }
table.dataTable.compact tbody td,
table.dataTable.compact thead th { padding: 6px 8px; }

/* DataTables ha colori hardcoded chiari (righe, strisce, hover, bordi):
   li riporto sui token, altrimenti in tema scuro resterebbero bianchi. */
table.dataTable tbody tr { background-color: var(--c-surface); }
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background-color: var(--c-surface-2); }
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover { background-color: var(--c-surface-3); }
/* Colonna ordinata: DataTables la evidenzia con colori chiari hardcoded su
   generico/.odd/.even/:hover. Vanno coperte TUTTE le combinazioni (quelle con
   .even hanno specificita' maggiore del generico), altrimenti in dark restano bianche.
   Qui le celle seguono semplicemente lo sfondo della propria riga. */
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3,
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 { background-color: var(--c-surface); }

table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_2,
table.dataTable.display tbody tr.even > .sorting_3,
table.dataTable.order-column tbody tr.even > .sorting_1,
table.dataTable.order-column tbody tr.even > .sorting_2,
table.dataTable.order-column tbody tr.even > .sorting_3 { background-color: var(--c-surface); }

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd > .sorting_2,
table.dataTable.display tbody tr.odd > .sorting_3,
table.dataTable.order-column tbody tr.odd > .sorting_1,
table.dataTable.order-column tbody tr.odd > .sorting_2,
table.dataTable.order-column tbody tr.odd > .sorting_3 { background-color: var(--c-surface-2); }

table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.order-column tbody tr:hover > .sorting_1,
table.dataTable.order-column tbody tr:hover > .sorting_2,
table.dataTable.order-column tbody tr:hover > .sorting_3 { background-color: var(--c-surface-3); }
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td,
table.dataTable.display tbody th,    table.dataTable.display tbody td { border-top-color: var(--c-border); }

/* frecce di ordinamento: le immagini di DataTables sono scure (invisibili in dark)
   -> le sostituisco con indicatori testuali colorati dai token */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-image: none !important;
    position: relative;
    padding-right: 20px;
    cursor: pointer;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 10px; line-height: 1; color: var(--c-text-faint);
    content: "\2195";
}
table.dataTable thead th.sorting_asc::after  { content: "\2191"; color: var(--c-accent); }
table.dataTable thead th.sorting_desc::after { content: "\2193"; color: var(--c-accent); }

.dataTables_wrapper .dataTables_info { color: var(--c-text-muted); font-size: var(--fs-200); padding-top: var(--sp-2); }
.dataTables_wrapper .dataTables_paginate { padding-top: var(--sp-2); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 10px !important; margin-left: 2px;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-sm);
    background: var(--c-surface) !important;
    color: var(--c-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-surface-2) !important;
    border-color: var(--c-border-strong) !important;
    color: var(--c-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: var(--c-on-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--c-text-faint) !important;
    background: var(--c-surface) !important;
    cursor: default;
}

/* --------------------------------------------------------------- Notify.js  */
.notifyjs-metro-base {
    border: 0 !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--sh-2);
    padding: 10px 14px !important;
    font-size: var(--fs-200) !important;
    color: var(--c-bg) !important;      /* si inverte col tema: sempre leggibile */
    min-width: 180px;
    background-color: var(--c-text) !important;
}
.notifyjs-metro-success { background-color: var(--c-success) !important; }
.notifyjs-metro-error,
.notifyjs-metro-danger  { background-color: var(--c-danger)  !important; }
.notifyjs-metro-info    { background-color: var(--c-info)    !important; }
.notifyjs-metro-warn    { background-color: var(--c-warning) !important; }

/* --------------------------------------------- Barra progresso (upload)     */
/* sostituisce .progress/.progress-bar(-success) di Bootstrap */
.progress {
    height: 18px;
    background: var(--c-surface-2);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-top: var(--sp-2);
}
.progress-bar {
    height: 100%;
    width: 0;
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-size: var(--fs-100);
    text-align: center;
    line-height: 18px;
    transition: width .2s ease;
}
.progress-bar-success { background: var(--c-success); }

/* ------------------------------------------------------------------ Modal   */
html.modal-open { overflow: hidden; }
.modal-backdrop {
    position: fixed; inset: 0;
    z-index: var(--z-backdrop);
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.modal-backdrop.modal-align-top { align-items: flex-start; padding-top: 48px; }
.modal {
    position: relative;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: 95vw;
    max-height: 90vh;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    overflow: hidden;
}
.modal-header {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    font-weight: var(--fw-medium);
    font-size: var(--fs-400);
    color: var(--c-text);
}
.modal-body { padding: var(--sp-4); overflow: auto; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-2);
}
.modal-btn {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.modal-btn:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); }
.modal-btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.modal-btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

/* Campi dei form dentro i modali: larghezza piena + stile moderno */
.modal-body table:not(.dataTable) { width: 100%; }
.modal-body table:not(.dataTable) > tbody > tr > td { padding: var(--sp-1) var(--sp-2); vertical-align: middle; }
.modal-body input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.modal-body select,
.modal-body textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--fs-300);
}
.modal-body textarea { resize: vertical; }
.modal-body input:not([type="button"]):focus,
.modal-body select:focus,
.modal-body textarea:focus {
    outline: none; border-color: var(--c-accent); box-shadow: var(--sh-focus);
}
/* i controlli delle DataTables dentro i modali restano dimensionati al contenuto */
.modal-body .dataTables_filter input,
.modal-body .dataTables_length select { width: auto; }
/* pulsanti tipo "da CF" restano compatti */
.modal-body input[type="button"] {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
    white-space: nowrap;
}
.modal-body input[type="button"]:hover { background: var(--c-surface-2); }

@media (max-width: 480px) {
    .modal-backdrop, .modal-backdrop.modal-align-top { padding: 0; align-items: flex-end; }
    .modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ------------------------------------------------------------------ Login   */

.login-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(1200px 600px at 50% -10%, #1e293b 0%, #0b1220 60%, #05070d 100%);
    padding-top: 0;
    padding-bottom: 0;
}
.login-card {
    width: min(92vw, 380px);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: var(--sp-8) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.login-logo {
    width: 210px;
    max-width: 80%;
    aspect-ratio: 1200 / 377;   /* proporzione reale del logo */
    margin: 0 auto;
    background: center / contain no-repeat var(--logo-src);
}
.login-field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 0 var(--sp-3);
    background: var(--c-surface);
    transition: border-color .15s, box-shadow .15s;
}
.login-field:focus-within { border-color: var(--c-accent); box-shadow: var(--sh-focus); }
.login-field .icon { color: var(--c-text-faint); flex: 0 0 auto; width: 20px; height: 20px; }
.login-field input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    padding: var(--sp-3) 0;
    background: transparent;
    color: var(--c-text);
}
.login-error {
    background: var(--c-danger-soft);
    color: var(--c-danger);
    border: 1px solid #f4c4bf;
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-200);
    text-align: center;
}
.login-btn {
    width: 100%;
    padding: var(--sp-3);
    border: 0;
    border-radius: var(--r-md);
    background: var(--c-accent);
    color: var(--c-on-accent);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background .15s;
}
.login-btn:hover { background: var(--c-accent-hover); }

/* ------------------------------------------------------------------ Icone   */
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.15em; }

/* ------------------------------------------------------------- Responsive   */
@media (max-width: 768px) {
    .header { padding: 0 var(--sp-3); gap: var(--sp-2); }
    .header .page_title { font-size: var(--fs-300); }
    .page { padding: var(--sp-3); }
    /* solo su schermi stretti le tabelle scrollano invece di rompere il layout */
    .dataTables_wrapper { overflow-x: auto; }
}

/* ------------------------------------------------------------------ Stampa  */
@media print {
    body { padding: 0; }
    .header, .app-footer { position: static; box-shadow: none; }
    .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate,
    .no_print { display: none !important; }
    /* in stampa sempre il logo scuro, indipendentemente dal tema a schermo */
    .header .logo { height: 26px !important; background-image: url("/img/logo-light.png") !important; }
}