/* Il tema scuro (e OLED) di 1mpresaWeb: dal browser e dentro l'app mobile.
   ⚠️ Ogni regola qui dentro gareggia con le regole del portale, e chi perde non lo dice a
   nessuno: nessun errore, solo un pezzo di pagina rimasto chiaro. Le contromisure di
   specificita' sono MISURATE, non dedotte - non semplificarle.
   Si attiva con [data-ts1-tema="scuro"] sull'<html>, che scrive:
     - js/ts1-tema.js quando la scelta e' fatta nel menu dell'operatore (browser);
     - js/ts1-embed.js quando la chiede l'app (embed).
   Il tema chiaro e' il portale com'e': senza quell'attributo il foglio e' inerte.
   ⚠️ Il nome del file resta "embed" per storia: lo nominano sw.js, i banchi dell'app e
   gli asset dell'APK. Rinominarlo costa piu' di quanto chiarisca. */

/* Le PALETTE, per variante. Sono COPIE dei blocchi body[data-theme="dark"] e
   body[data-theme="oled"] di mobile/css/style.css: tests/js/temi-web-css.test.js le
   confronta valore per valore, quindi un colore ritoccato nell'app e non qui e' rosso.
   Dentro l'app le dieci variabili di base arrivano ANCHE col messaggio, scritte in
   style sull'<html>: vincono su queste, e l'embed resta identico a prima. Le rampe di
   stato invece non le manda nessuno, ed e' qui che le trova la Fase 2 (le colonne
   colorate degli elenchi). */
html[data-ts1-variante="dark"] {
    --ts1-page-bg: #0f1720;
    --ts1-surface: #16222f;
    --ts1-surface-muted: #1b2b39;
    --ts1-surface-strong: #203445;
    --ts1-line: #284050;
    --ts1-text: #f2f6fb;
    --ts1-text-soft: #a8b8c7;
    --ts1-brand-text: #8fcaf7;
    --ts1-brand-soft: rgba(82, 145, 196, 0.18);
    --ts1-accent: #67cbe4;
    --ts1-stato-neutro-bg: rgba(168, 184, 199, 0.16);
    --ts1-stato-neutro-fg: #a8b8c7;
    --ts1-stato-info-bg: rgba(31, 138, 168, 0.22);
    --ts1-stato-info-fg: #67cbe4;
    --ts1-stato-attesa-bg: rgba(213, 134, 32, 0.22);
    --ts1-stato-attesa-fg: #e8b06a;
    --ts1-stato-stop-bg: rgba(191, 67, 61, 0.22);
    --ts1-stato-stop-fg: #e39490;
    --ts1-stato-ok-bg: rgba(31, 143, 95, 0.22);
    --ts1-stato-ok-fg: #74d3a5;
    /* Solo del sito: il rosso PIENO del portale (colonna S, Sospeso) e' un allarme,
       non uno stato; il velo da 0.22 lo confonderebbe con un'etichetta qualunque. */
    --ts1-stato-stop-forte: rgba(191, 67, 61, 0.55);
}

html[data-ts1-variante="oled"] {
    --ts1-page-bg: #000000;
    --ts1-surface: #101010;
    --ts1-surface-muted: #181818;
    --ts1-surface-strong: #202020;
    --ts1-line: #5a5a5a;
    --ts1-text: #fbfbfb;
    --ts1-text-soft: #b8b8b8;
    --ts1-brand-text: #9fd6ff;
    --ts1-brand-soft: rgba(96, 167, 224, 0.28);
    --ts1-accent: #79d5ee;
    --ts1-stato-neutro-bg: rgba(184, 184, 184, 0.2);
    --ts1-stato-neutro-fg: #b8b8b8;
    --ts1-stato-info-bg: rgba(31, 138, 168, 0.34);
    --ts1-stato-info-fg: #79d5ee;
    --ts1-stato-attesa-bg: rgba(213, 134, 32, 0.34);
    --ts1-stato-attesa-fg: #efbc7c;
    --ts1-stato-stop-bg: rgba(191, 67, 61, 0.34);
    --ts1-stato-stop-fg: #eda19d;
    --ts1-stato-ok-bg: rgba(31, 143, 95, 0.34);
    --ts1-stato-ok-fg: #85dfb2;
    --ts1-stato-stop-forte: rgba(191, 67, 61, 0.6);
}

/* La base. Il portale dichiara html e body trasparenti (css/style.css del
   sito), quindi senza questo si vedrebbe attraverso: sotto c'e' la cornice
   della modale, e la pagina resterebbe scritta in scuro sopra il fondo scuro. */
html[data-ts1-tema="scuro"] {
    /* Vale per tutto cio' che disegna il browser e non il portale: caselle,
       elenchi a discesa nativi, campi data, barre di scorrimento. Senza, restano
       bianchi uno per uno sopra una pagina scura. */
    color-scheme: dark;
    background-color: var(--ts1-page-bg);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] body {
    background-color: var(--ts1-page-bg);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] a:not(.btn):not(.nav-link) {
    color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] hr {
    border-color: var(--ts1-line);
}

/* La velina che copre la pagina mentre carica (#loader della MasterPage): e'
   bianca piena e sta sopra tutto, quindi a ogni attesa lo scuro spariva e
   tornava. Delle tre ghiere che girano, la piu' esterna e' blu scuro (#09426F)
   e sul fondo scuro non si vedrebbe: prende il blu chiaro del tema. */
html[data-ts1-tema="scuro"] #loader {
    background: var(--ts1-page-bg) !important;
}

html[data-ts1-tema="scuro"] #loader.ts-loader-trasparente {
    background: rgba(0, 0, 0, 0.5) !important;
}

html[data-ts1-tema="scuro"] #loader-spinner {
    border-top-color: var(--ts1-brand-text);
}

/* I campi. .ts-txt-lg e parenti sono le caselle bianche col bordo azzurro della
   scheda; .txt_dett e' il campo senza bordo che ci sta dentro; .aspTextBox e
   .ts-txt-100 sono le aree di testo lunghe, come le Note dell'intervento.

   Il colore del testo va con !important e gli altri no, per una ragione precisa:
   .aspTextBox il colore lo DICHIARA (#464646), e una dichiarazione che c'e' gia'
   la si scavalca solo alla pari. Le Note restavano scritte in grigio scuro su
   fondo scuro anche con la casella gia' vestita. */
html[data-ts1-tema="scuro"] .ts-txt-lg,
html[data-ts1-tema="scuro"] .ts-txt-lg-dtable,
html[data-ts1-tema="scuro"] .ts-txt-auto-dtable,
html[data-ts1-tema="scuro"] .ts-txt-lg-color,
html[data-ts1-tema="scuro"] .ts-txt-100,
html[data-ts1-tema="scuro"] .ts-txt-md,
html[data-ts1-tema="scuro"] .aspTextBox,
html[data-ts1-tema="scuro"] .pTextBox,
html[data-ts1-tema="scuro"] .txt_dett,
html[data-ts1-tema="scuro"] .txt_dett_b,
html[data-ts1-tema="scuro"] .form-control,
html[data-ts1-tema="scuro"] .form-select,
html[data-ts1-tema="scuro"] input[type="text"],
html[data-ts1-tema="scuro"] input[type="search"],
html[data-ts1-tema="scuro"] input[type="password"],
html[data-ts1-tema="scuro"] input[type="number"],
html[data-ts1-tema="scuro"] input[type="email"],
html[data-ts1-tema="scuro"] input[type="tel"],
html[data-ts1-tema="scuro"] input[type="date"],
html[data-ts1-tema="scuro"] textarea,
html[data-ts1-tema="scuro"] select {
    background-color: var(--ts1-surface-muted);
    color: var(--ts1-text) !important;
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] ::placeholder {
    color: var(--ts1-text-soft);
    opacity: 1;
}

/* La sola lettura si distingue ancora dal campo scrivibile, ma di un gradino di
   grigio invece che col grigio chiaro fisso del portale (#e6e7eb, !important). */
html[data-ts1-tema="scuro"] textarea[readonly],
html[data-ts1-tema="scuro"] input:disabled,
html[data-ts1-tema="scuro"] textarea:disabled,
html[data-ts1-tema="scuro"] select:disabled,
html[data-ts1-tema="scuro"] .ts-txt-lg:disabled,
html[data-ts1-tema="scuro"] .ts-txt-lg-dtable:disabled,
html[data-ts1-tema="scuro"] .ts-disabled,
html[data-ts1-tema="scuro"] .ts-readonly-color {
    background-color: var(--ts1-surface-strong) !important;
    color: var(--ts1-text-soft) !important;
    border-color: var(--ts1-line) !important;
}

/* ⚠️ I CAMPI DI SOLA LETTURA SI ANCORANO PIU' STRETTO, e non e' un vezzo: fra due
   dichiarazioni importanti vince la piu' SPECIFICA, e le classi pesano piu' degli
   elementi. Il portale li schiarisce con

     input[type="text"][readonly]:not(.js-filter-list, .customReadOnly):not(.js-filter-list-dt)

   che vale (0,4,1) - i due :not() contano come le classi che nominano - mentre
   `html[data-ts1-tema="scuro"] input[type="text"][readonly]` vale (0,3,2) e PERDE.
   Misurato: il campo restava rgba(230,231,235,0.7), cioe' quasi bianco, e siccome
   la targhetta della floating label prende il fondo scuro di Bootstrap si vedeva
   un'etichetta scura appiccicata sopra un campo chiaro. Gli stessi campi
   `disabled` erano gia' giusti, e sono quelli che qui sopra restano com'erano: e'
   il motivo per cui il difetto sembrava riguardare i campi disabilitati mentre
   riguarda quelli in sola lettura.

   L'ancora e' fatta dei TRE segni che `applica` mette davvero sull'<html> del
   portale - la classe `dark` e i due attributi - quindi non e' una zeppa: vale
   (0,3,1) e porta la regola a (0,5,2). Serve dove il portale usa selettori densi
   di classi, e non serve altrove. */
html.dark[data-bs-theme="dark"][data-ts1-tema="scuro"] input[type="text"][readonly],
html.dark[data-bs-theme="dark"][data-ts1-tema="scuro"] input[type="search"][readonly],
html.dark[data-bs-theme="dark"][data-ts1-tema="scuro"] input[type="text"][readonly].js-filter-list {
    background-color: var(--ts1-surface-strong) !important;
    color: var(--ts1-text-soft) !important;
    border-color: var(--ts1-line) !important;
}

/* Le linguette. L'attiva nel portale e' bianca con testo quasi nero, dichiarati
   !important: senza queste righe resta un rettangolo bianco in mezzo allo scuro. */
html[data-ts1-tema="scuro"] .nav-tabs .nav-link {
    color: var(--ts1-brand-text);
    border-color: var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] .nav-tabs .nav-link.active,
html[data-ts1-tema="scuro"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--ts1-surface) !important;
    color: var(--ts1-text) !important;
    border-color: var(--ts1-line) var(--ts1-line) var(--ts1-surface) !important;
}

/* I riquadri di contenuto, compresi quelli delle pagine piu' vecchie (mGrid,
   Gridview, c_dati, tfiltri) che non passano da Bootstrap. */
html[data-ts1-tema="scuro"] .card,
html[data-ts1-tema="scuro"] .modal-content,
html[data-ts1-tema="scuro"] .dropdown-menu,
html[data-ts1-tema="scuro"] .ts-custom-menu,
html[data-ts1-tema="scuro"] .vmenu,
html[data-ts1-tema="scuro"] .c_dati,
html[data-ts1-tema="scuro"] .tfiltri,
html[data-ts1-tema="scuro"] .mGrid,
html[data-ts1-tema="scuro"] .Gridview tr,
html[data-ts1-tema="scuro"] .ts-detail-mag {
    background-color: var(--ts1-surface) !important;
    color: var(--ts1-text);
    border-color: var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] .icon_btn {
    background-color: var(--ts1-surface-strong) !important;
}

/* I DUE MENU IN BASSO A DESTRA - i tre puntini e Condividi (MasterPage.master:283).
   Sono gli unici due pannelli che la regola generica su .dropdown-menu qui sopra
   non riesce a vestire, e per due motivi diversi.

   I tre puntini: il portale li dipinge con `#ul-menuDot { background: rgba(240,
   251, 255, 0.5) !important }` (css/style.css). Un ID vale (1,0,0) e batte
   qualunque selettore fatto di classi, quindi la regola generica perdeva. Qui si
   risponde con lo stesso ID: (1,2,1), e vince. Il mezzo velo bianco sopra il
   fondo scuro dava una lastra lattiginosa con dentro delle icone che sparivano. */
html[data-ts1-tema="scuro"] #ul-menuDot {
    background: var(--ts1-surface) !important;
    border-color: var(--ts1-line) !important;
}

/* Condividi: qui il fondo chiaro sta nell'ATTRIBUTO style del tag, con !important
   (`style="background: #eef5fb !important"`, documenti/documenti_dettaglio.aspx e
   interventi/interventi_dettaglio.aspx, le due pagine che hanno il pannello). Quella dichiarazione NON si
   scavalca da un foglio: nella cascata le importanti scritte in linea stanno sopra
   le importanti di qualunque selettore. Non e' una questione di specificita', e
   nessun numero di ID la vince - verificato al banco. (Fase 5: le due pagine ora
   scrivono var(--ts1-menu-chiaro, #eef5fb) e in scuro la variabile vale --ts1-surface, lo
   stesso tono di quest'ombra: l'ombra resta, ed e' sempre lei quella che si vede.)

   Quindi non si scavalca: si copre. Un'ombra INTERNA grande quanto il pannello si
   disegna sopra il fondo e sotto il contenuto (e' l'ordine di disegno del
   riquadro: fondo, ombra interna, bordo, contenuto), quindi il chiaro sparisce e
   le voci restano leggibili. `box-shadow` in linea non c'e', percio' la nostra
   dichiarazione e' l'unica: nessuna gara da vincere.

   ⚠️ L'alternativa era togliere lo style dal tag via JS all'apertura. Scartata: il
   pannello viene RICLONATO da outerHTML a ogni cambio di larghezza (MasterPage
   .master:842) e ricostruito dai postback, quindi la pulizia andrebbe rifatta a
   ogni giro e basterebbe mancarne uno per rivedere la lastra chiara. Una regola
   di foglio invece vale anche per i cloni che nasceranno domani. */
html[data-ts1-tema="scuro"] #dropDownShare {
    box-shadow: inset 0 0 0 100vmax var(--ts1-surface) !important;
    border-color: var(--ts1-line) !important;
    color: var(--ts1-text) !important;
}

/* Le voci dei due menu: nel portale sono <li class="dropdown-item"> - non <a> -
   quindi il colore del testo non arriva da Bootstrap ma per eredita', e sul
   pannello coperto dall'ombra resterebbe quello della pagina. */
html[data-ts1-tema="scuro"] #dropDownShare .dropdown-item,
html[data-ts1-tema="scuro"] #ul-menuDot .dropdown-item {
    color: var(--ts1-text) !important;
    background-color: transparent !important;
}

html[data-ts1-tema="scuro"] #dropDownShare .dropdown-item:hover,
html[data-ts1-tema="scuro"] #ul-menuDot .dropdown-item:hover {
    background-color: var(--ts1-surface-strong) !important;
}

/* Gli elenchi a discesa di select2 e chosen: li disegnano loro, non il browser,
   quindi color-scheme non li tocca. Il pannello dei risultati vive in fondo al
   body, fuori dal riquadro: e' comunque lo stesso documento. */
html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--single,
html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--multiple,
html[data-ts1-tema="scuro"] .select2-dropdown,
html[data-ts1-tema="scuro"] .select2-search__field,
html[data-ts1-tema="scuro"] .chosen-container .chosen-single,
html[data-ts1-tema="scuro"] .chosen-container .chosen-drop,
html[data-ts1-tema="scuro"] .chosen-container .chosen-search input {
    background: var(--ts1-surface-muted) !important;
    background-image: none !important;
    color: var(--ts1-text) !important;
    border-color: var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-ts1-tema="scuro"] .select2-results__option,
html[data-ts1-tema="scuro"] .chosen-container .chosen-results li {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-ts1-tema="scuro"] .chosen-container .chosen-results li.highlighted {
    background-color: var(--ts1-brand-soft) !important;
    color: var(--ts1-text) !important;
}

/* Le targhette delle scelte multiple (gli impianti collegati all'intervento):
   grigio chiaro fisso, e restavano l'unica cosa chiara dentro un riquadro scuro. */
html[data-ts1-tema="scuro"] .select2-selection__choice,
html[data-ts1-tema="scuro"] .select2-selection__choice__display,
html[data-ts1-tema="scuro"] .chosen-container-multi .chosen-choices li.search-choice {
    background: var(--ts1-surface-strong) !important;
    background-image: none !important;
    border-color: var(--ts1-line) !important;
    color: var(--ts1-text) !important;
}

html[data-ts1-tema="scuro"] .select2-selection__choice__remove,
html[data-ts1-tema="scuro"] .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    color: var(--ts1-text-soft) !important;
}

/* Il calendario di flatpickr, stessa ragione dei due sopra. */
html[data-ts1-tema="scuro"] .flatpickr-calendar,
html[data-ts1-tema="scuro"] .flatpickr-months,
html[data-ts1-tema="scuro"] .flatpickr-weekdays,
html[data-ts1-tema="scuro"] span.flatpickr-weekday {
    background: var(--ts1-surface) !important;
    color: var(--ts1-text) !important;
    fill: var(--ts1-text) !important;
}

html[data-ts1-tema="scuro"] .flatpickr-day {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-day.flatpickr-disabled,
html[data-ts1-tema="scuro"] .flatpickr-day.prevMonthDay,
html[data-ts1-tema="scuro"] .flatpickr-day.nextMonthDay {
    color: var(--ts1-text-soft);
}

/* Gli elenchi DataTables: la tabella la veste Bootstrap, la barra degli strumenti
   attorno (ricerca, lunghezza, pulsanti) no. */
html[data-ts1-tema="scuro"] .dataTables_wrapper,
html[data-ts1-tema="scuro"] div.dt-container {
    color: var(--ts1-text);
}

/* Il fondo che DataTables usa per le sue parti opache quando sta in scuro: di
   suo vale rgb(33,37,41), che accanto alle nostre superfici e' un grigio a se'. */
html[data-ts1-tema="scuro"] {
    --dt-html-background: var(--ts1-surface);
}

/* Le colonne bloccate a sinistra (FixedColumns): sono le uniche celle OPACHE
   della tabella - devono coprire le righe che ci scorrono sotto - e sia il
   portale sia DataTables le dichiarano bianche. Restavano due rettangoli bianchi
   in cima e lungo il bordo dell'elenco (la colonna "Prg"). */
html[data-ts1-tema="scuro"] table th.dtfc-fixed-left,
html[data-ts1-tema="scuro"] table th.dtfc-fixed-right,
html[data-ts1-tema="scuro"] table td.dtfc-fixed-left,
html[data-ts1-tema="scuro"] table td.dtfc-fixed-right,
html[data-ts1-tema="scuro"] table.DTFC_Cloned thead,
html[data-ts1-tema="scuro"] table.DTFC_Cloned tfoot {
    background-color: var(--ts1-surface) !important;
}

/* La riga sotto il dito. Il portale la schiarisce a #c7d5e1, e la cella a #9bc1e1,
   entrambi !important: sono tinte pensate per la pagina chiara, e sullo scuro
   diventano una banda quasi bianca con sopra il testo azzurro dei link - cioe'
   proprio la riga che si sta guardando e' l'unica che non si legge. Qui va nella
   direzione opposta: un gradino piu' CHIARO del fondo, non un salto al bianco.

   Si scrive anche su `> *` perche' le celle delle colonne bloccate hanno un fondo
   proprio (la regola qui sopra), che altrimenti resterebbe sotto il dito. */
html[data-ts1-tema="scuro"] table.dataTable tbody tr:hover,
html[data-ts1-tema="scuro"] table.dataTable tbody tr:hover > *,
html[data-ts1-tema="scuro"] table.dataTable tbody td:hover {
    background-color: var(--ts1-surface-strong) !important;
    color: var(--ts1-text) !important;
}

html[data-ts1-tema="scuro"] table.dataTable tbody tr:hover a {
    color: var(--ts1-brand-text) !important;
}

/* Il pulsante di Tetra AI in basso a destra. Il suo logo (images/aitetra_ico.png) ha la
   scritta TETRA in nero: sullo scuro sparirebbe. Come per il logo TetraSystem la scritta
   e' chiara in una variante d'immagine (images/aitetra_ico-scuro.png, js/AgentHub.js);
   la pastiglia chiara che c'era prima e' stata tolta per la stessa scelta dell'utente.
   Visibilita' della variante: in coda, FASE 6 - LOGO DI TETRA AI. */

html[data-ts1-tema="scuro"] .dt-search input,
html[data-ts1-tema="scuro"] .dt-length select,
html[data-ts1-tema="scuro"] .dataTables_filter input,
html[data-ts1-tema="scuro"] .dataTables_length select {
    background-color: var(--ts1-surface-muted) !important;
    color: var(--ts1-text) !important;
    border-color: var(--ts1-line) !important;
}

/* I pulsanti della barra DataTables restano SENZA fondo. Nel portale hanno una
   pastiglia chiara, ma quello che ci sta dentro e' un'icona a colori su
   trasparente - il + verde delle righe d'intervento - e dare loro una superficie
   nostra creava un rettangolo di tinta diversa attorno all'icona, che sullo scuro
   si nota molto piu' della pastiglia chiara sul chiaro. */
html[data-ts1-tema="scuro"] div.dt-buttons > .dt-button,
html[data-ts1-tema="scuro"] div.dt-buttons > .dt-button:hover:not(.disabled),
html[data-ts1-tema="scuro"] div.dt-buttons > div.dt-button-split .dt-button {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--ts1-text) !important;
}
/* ==== FASE 1 - LA CORNICE: quello che compare su OGNI pagina aperta dal browser ======
   Dentro l'app #headerBar e' rimosso (ts1-embed.js), quindi la barra e il suo menu si
   vedono solo da qui. Ogni selettore e' misurato contro quello del portale da
   tests/js/temi-web-css.test.js. */

/* La barra: nel portale e' una tinta piatta azzurra (style.css, #headerBar). */
html[data-ts1-tema="scuro"] #headerBar {
    background-color: var(--ts1-surface);
    border-bottom: 1px solid var(--ts1-line);
}

/* link-dark e' di Bootstrap, con !important e senza variante scura: il nome
   dell'operatore e le voci del menu laterale (MasterPage.master:171, :1115, :1133). */
html[data-ts1-tema="scuro"] .link-dark {
    color: var(--ts1-text) !important;
}

html[data-ts1-tema="scuro"] nav .navbar-light .navbar-nav .nav-link {
    color: var(--ts1-text-soft);
}

/* I menu della barra e quello del tasto destro sugli elenchi: #eef5fb !important. */
html[data-ts1-tema="scuro"] nav .dropdown-menu,
html[data-ts1-tema="scuro"] #tsmenudt > ul {
    background: var(--ts1-surface) !important;
    border-color: var(--ts1-line);
}

/* Azzurro come i link: le voci <a> lo prendono gia' dalla regola dei link, ma quelle che
   aprono una modale sono <button> (MasterPage.master, createMenu: OggettoWEB con '@') o
   <span> (ShortCuts), e col testo chiaro spiccavano in mezzo alle altre. */
html[data-ts1-tema="scuro"] .dropdown-item {
    color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .dropdown-item:hover,
html[data-ts1-tema="scuro"] .dropdown-item:focus {
    background: var(--ts1-surface-strong) !important;
    color: var(--ts1-text) !important;
}

/* bg-light di Bootstrap resta chiaro anche con data-bs-theme="dark" (e' --bs-light,
   non --bs-body-bg): 19 intestazioni di card in documenti_tipi_docgest.aspx. */
html[data-ts1-tema="scuro"] .bg-light {
    background-color: var(--ts1-surface-strong) !important;
    color: var(--ts1-text);
}

/* text-dark: solo dove NON accompagna un fondo colorato (badge gialli e simili, dove
   il testo scuro e' quello giusto). */
html[data-ts1-tema="scuro"] .text-dark:not([class*="bg-"]):not(.badge) {
    color: var(--ts1-text) !important;
}

/* Le superfici bianche o quasi delle pagine piu' vecchie. */
html[data-ts1-tema="scuro"] tr.d0 td,
html[data-ts1-tema="scuro"] .PermessiGruppoTD,
html[data-ts1-tema="scuro"] .PermessiSpecialiTD,
html[data-ts1-tema="scuro"] .ts-shortcutLink,
html[data-ts1-tema="scuro"] .popup .content,
html[data-ts1-tema="scuro"] .grid_btn_white,
html[data-ts1-tema="scuro"] .TSpnl,
html[data-ts1-tema="scuro"] #menuPlanner .dropdown-menu,
html[data-ts1-tema="scuro"] #lnb,
html[data-ts1-tema="scuro"] .calculator-display,
html[data-ts1-tema="scuro"] .calc-dynamic-rows {
    background: var(--ts1-surface) !important;
    color: var(--ts1-text);
    border-color: var(--ts1-line);
}

/* I suggerimenti gialli (#fff3cd): restano un avviso, col velo di attesa. */
html[data-ts1-tema="scuro"] .tsedittip,
html[data-ts1-tema="scuro"] .tsedittipUP {
    background: var(--ts1-stato-attesa-bg) !important;
    color: var(--ts1-stato-attesa-fg);
    border-color: var(--ts1-line);
}

/* Gli stati :hover del portale (giallo #FD0, velo azzurro) pesano piu' delle regole
   sopra: serve la stessa forma, con il tema davanti. */
html[data-ts1-tema="scuro"] .vmenu .sez:hover,
html[data-ts1-tema="scuro"] .ts-custom-menu .sez:hover {
    background-color: var(--ts1-surface-strong) !important;
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] #menuPlanner .dropdown-menu > li > a:hover {
    background-color: var(--ts1-surface-strong) !important;
    color: var(--ts1-text);
}

/* ==== FASE 2 - ELENCHI ================================================================ */

/* Intestazioni dei flag: (0,2,2), batte .ts-backcolor-* scure qui sotto (0,2,1). */
html[data-ts1-tema="scuro"] th[data-ts-th-flag] {
    background-color: var(--ts1-surface) !important;
    color: var(--ts1-text);
    box-shadow: none;
}

/* Le colonne colorate degli elenchi e il resto della famiglia .ts-backcolor-* /
   .ts-background-* (css/style.css ~2125-2300, ~415 usi). Il colore DICE qualcosa -
   contabilizzato, evaso, sospeso - e per questo non si spegne: la tinta resta, da
   riempimento chiaro diventa velo sul fondo scuro, come le pastiglie di stato dell'app.
   Raggruppate per tinta; tests/js/temi-web-css.test.js vuole che OGNI classe della
   famiglia compaia qui, quindi una classe nuova nel portale e' un rosso finche' non le
   si sceglie il gruppo. */

/* Verdi: Cn, Sc, Pa nei documenti, e le spunte "fatto". */
html[data-ts1-tema="scuro"] .ts-backcolor-light-green,
html[data-ts1-tema="scuro"] .ts-backcolor-lightgreen,
html[data-ts1-tema="scuro"] .ts-backcolor-grannyapple,
html[data-ts1-tema="scuro"] .ts-backcolor-lime,
html[data-ts1-tema="scuro"] .ts-backcolor-light-lime,
html[data-ts1-tema="scuro"] .ts-backcolor-greenp,
html[data-ts1-tema="scuro"] .ts-backcolor-green {
    background-color: var(--ts1-stato-ok-bg) !important;
    color: var(--ts1-text);
}

/* Grigi: Or, Pc, Co, Po, FCC. */
html[data-ts1-tema="scuro"] .ts-backcolor-gray,
html[data-ts1-tema="scuro"] .ts-backcolor-lightgrey,
html[data-ts1-tema="scuro"] .ts-backcolor-gray-a4,
html[data-ts1-tema="scuro"] .ts-backcolor-mercury,
html[data-ts1-tema="scuro"] .ts-background-mercury,
html[data-ts1-tema="scuro"] tr.alt.ts-background-mercury,
html[data-ts1-tema="scuro"] .ts-backcolor-alabaster {
    background: var(--ts1-stato-neutro-bg) !important;
    color: var(--ts1-text);
}

/* Azzurri: Pe, Ev. */
html[data-ts1-tema="scuro"] .ts-backcolor-blue,
html[data-ts1-tema="scuro"] .ts-backcolor-light-blue,
html[data-ts1-tema="scuro"] .ts-backcolor-sail,
html[data-ts1-tema="scuro"] table.dataTable tbody tr.ts-backcolor-sail td,
html[data-ts1-tema="scuro"] .ts-backcolor-polar,
html[data-ts1-tema="scuro"] .ts-backcolor-cold-purple,
html[data-ts1-tema="scuro"] .ts-backcolor-cold-dodgerblue {
    background-color: var(--ts1-stato-info-bg) !important;
    color: var(--ts1-text);
}

/* Arancio e gialli: A (allegati, pesca), evidenze. */
html[data-ts1-tema="scuro"] .ts-backcolor-salmon,
html[data-ts1-tema="scuro"] .ts-backcolor-peach-orange,
html[data-ts1-tema="scuro"] .ts-backcolor-orange,
html[data-ts1-tema="scuro"] .ts-backcolor-supernova,
html[data-ts1-tema="scuro"] .ts-backcolor-yellow,
html[data-ts1-tema="scuro"] .ts-background-school-bus-yellow {
    background: var(--ts1-stato-attesa-bg) !important;
    color: var(--ts1-text);
}

/* Rossi tenui. */
html[data-ts1-tema="scuro"] .ts-backcolor-seapink,
html[data-ts1-tema="scuro"] .ts-backcolor-lightcoral,
html[data-ts1-tema="scuro"] .ts-backcolor-oyster-pink,
html[data-ts1-tema="scuro"] table.dataTable tbody tr.ts-backcolor-oyster-pink td {
    background-color: var(--ts1-stato-stop-bg) !important;
    color: var(--ts1-text);
}

/* Il rosso PIENO (S, Sospeso) e' un allarme: velo piu' denso degli altri. */
html[data-ts1-tema="scuro"] .ts-backcolor-red {
    background-color: var(--ts1-stato-stop-forte) !important;
    color: var(--ts1-text);
}

/* Il bianco cablato diventa la superficie. */
html[data-ts1-tema="scuro"] .ts-backcolor-white {
    background-color: var(--ts1-surface) !important;
}

/* Il nero (B, Stampato): su fondo scuro il nero non si distingue, quindi superficie
   forte con un filo di bordo interno - ombra e non border, per non spostare la
   griglia della tabella di un pixel. */
html[data-ts1-tema="scuro"] .ts-backcolor-black {
    background-color: var(--ts1-surface-strong) !important;
    box-shadow: inset 0 0 0 1px var(--ts1-line);
}

/* La riga selezionata (elenchi di app.js, Dati Azienda): #b0bed9, l'azzurro del brand. */
html[data-ts1-tema="scuro"] .ts-backcolor-pigeon-post,
html[data-ts1-tema="scuro"] .ts-background-pigeon-post {
    background: var(--ts1-brand-soft) !important;
    color: var(--ts1-text);
}

/* La riga dei totali: un gradino sopra la pagina, come le testate. */
html[data-ts1-tema="scuro"] .ts-totals-row {
    background-color: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

/* La navbar. Il logo: blu notte su fondo scuro non si leggeva (meno che mai «impresa
   web»). Niente riquadri - ne' qui ne' attorno alla foto profilo, che resta tonda come
   in chiaro: due immagini ricolorate, azzurro della palette + testo chiaro. */
html[data-ts1-tema="scuro"] #headerBar .navbar-brand .ts-logo-m:not(.ts-logo-variante),
html[data-ts1-tema="scuro"] #loginModal #TsLogoWelcome {
    display: none;
}

/* La variante scura vale per dark E per OLED (scelta dell'utente), nella barra e, in
   grande, nella modale di accesso (js/app.js, showLoginModal: welcomeBigger-scuro.png).
   ⚠️ Scollegate dal 2026-10-07: le immagini -oled (.ts-logo-oled in MasterPage.master e
   in showLoginModal) restano nel markup, lazy e mai mostrate, quindi mai scaricate. Per
   riaccenderle: qui la variante scura torna a html[data-ts1-variante="dark"] e si
   aggiunge html[data-ts1-variante="oled"] ... .ts-logo-oled. */
html[data-ts1-tema="scuro"] #headerBar .navbar-brand .ts-logo-scuro,
html[data-ts1-tema="scuro"] #loginModal .ts-logo-scuro {
    display: inline-block;
}

/* L'ombra delle card di «Riprendi da dove eri» (css/style.css, .ts1-home__recente). In
   scuro un nero piu' pieno; in OLED il nero sul nero sparisce, quindi un velo
   dell'azzurro della palette (--ts1-brand-text), sempre sotto e a destra. */
html[data-ts1-tema="scuro"] {
    --ts1-home-ombra: rgba(0, 0, 0, 0.55);
}

html[data-ts1-tema="scuro"][data-ts1-variante="oled"] {
    --ts1-home-ombra: rgba(159, 214, 255, 0.2);
}

/* L'alone del campo «Cerca ovunque» vuoto (css/style.css, #ts1HomeCerca): l'azzurro
   --ts1-brand-text della variante, al posto del celeste del chiaro. */
html[data-ts1-tema="scuro"] {
    --ts1-home-alone: rgba(143, 202, 247, 0.4);
}

html[data-ts1-tema="scuro"][data-ts1-variante="oled"] {
    --ts1-home-alone: rgba(159, 214, 255, 0.45);
}

/* La pillola del menu sulle card dei recenti (css/style.css, .ts1-home__pillola): stessa
   tinta, ma fondo cupo e testo chiaro. Vale anche per OLED: il fondo al 22% si stacca dal nero. */
html[data-ts1-tema="scuro"] .ts1-home__pillola {
    border-color: hsl(var(--ts1-pillola-tinta, 210), 35%, 38%);
    background-color: hsl(var(--ts1-pillola-tinta, 210), 40%, 22%);
    color: hsl(var(--ts1-pillola-tinta, 210), 75%, 84%);
}

/* Il velo dietro le modali: il portale lo vuole BIANCO (css/style.css, .modal-backdrop
   #fff al 50% di Bootstrap, e .modal-backdrop-opacity bianco al 50% sul contenitore).
   In scuro schiariva tutta la pagina - con due modali una sull'altra, come all'accesso,
   la rendeva quasi bianca. Qui torna nero, come il velo di Bootstrap. */
html[data-ts1-tema="scuro"] .modal-backdrop {
    background-color: #000000;
}

html[data-ts1-tema="scuro"] .modal-backdrop-opacity {
    background-color: rgba(0, 0, 0, 0.5);
}

/* ==== FASE 3 - COLORI SCRITTI IN LINEA DAL JS ==========================================
   Alcuni colori il JS li scrive nello style delle celle (promemoria scaduti, festivi
   delle presenze, CashFlow): nessun foglio li batte. Non si tolgono: il JS li scrive
   come var(--ts1-<nome>, <colore di oggi>). In chiaro la variabile non esiste e vale il
   ripiego - identico a prima, con la stessa priorita' dello style in linea - e qui la
   variabile dice il velo della palette. Dichiarate su html, risolvono sulle rampe della
   variante attiva (dark o oled).
   ⚠️ CashFlow: i nomi sono quelli della TINTA e non del significato, perche' la pagina
   usa gli stessi colori con significati scambiati in due punti (Fut/Prev, righe ~568-571
   contro ~364/376): incoerenza preesistente, qui non si corregge. */
html[data-ts1-tema="scuro"] {
    --ts1-riga-scaduta-bg: var(--ts1-stato-stop-bg);
    --ts1-riga-scaduta-fg: var(--ts1-text);
    --ts1-riga-avviso-bg: var(--ts1-stato-attesa-bg);
    --ts1-riga-avviso-fg: var(--ts1-text);
    --ts1-giorno-festivo: var(--ts1-brand-soft);
    --ts1-cf-azzurro: var(--ts1-stato-info-bg);
    --ts1-cf-verde: var(--ts1-stato-ok-bg);
    --ts1-cf-pesca: var(--ts1-stato-attesa-bg);
    --ts1-cf-grigio: var(--ts1-stato-neutro-bg);
}

/* ==== FASE 3 - INTESTAZIONE DELLE MODALI ================================================
   Nel portale e' azzurro #8dc8eb (blu notte #09426f quella dell'accesso) col testo
   bianco: in scuro era una striscia chiara sopra un corpo scuro. Un gradino sopra il
   corpo, con il filo azzurro del brand a separarla. (0,2,1) batte .modal-header (0,1,0)
   e .modal-header.ts-modal-login (0,2,0); il colore va con !important perche' il
   portale lo dichiara cosi'. Le icone .ts-modal-* h4:before sono bitmap colorate e
   restano. */
html[data-ts1-tema="scuro"] .modal-header {
    background-color: var(--ts1-surface-strong);
    border-bottom: 1px solid var(--ts1-brand-text);
    color: var(--ts1-text) !important;
}

/* ==== FASE 3 - BADGE .highlight-* ========================================================
   Targhe, codici, matricole (Gruppi.ascx, Impianti.ascx, gruppi_dettaglio.aspx,
   js/app.js:35510): fondo pastello e testo medio, che in scuro diventano velo e tono
   chiaro della stessa rampa. ⚠️ Stanno su .aspTextBox e su un input[type=text], dove la
   regola scura dei campi (0,2,2, colore !important) vincerebbe: html.dark in testa porta
   a (0,3,1), e tutto con !important come il portale fa sui bordi. */
html.dark[data-ts1-tema="scuro"] .highlight-blue {
    background-color: var(--ts1-stato-info-bg) !important;
    color: var(--ts1-stato-info-fg) !important;
    border-color: var(--ts1-stato-info-fg) !important;
}

html.dark[data-ts1-tema="scuro"] .highlight-yellow {
    background-color: var(--ts1-stato-attesa-bg) !important;
    color: var(--ts1-stato-attesa-fg) !important;
    border-color: var(--ts1-stato-attesa-fg) !important;
}

html.dark[data-ts1-tema="scuro"] .highlight-green,
html.dark[data-ts1-tema="scuro"] .highlight-green-important {
    background-color: var(--ts1-stato-ok-bg) !important;
    color: var(--ts1-stato-ok-fg) !important;
    border-color: var(--ts1-stato-ok-fg) !important;
}

html.dark[data-ts1-tema="scuro"] .highlight-red,
html.dark[data-ts1-tema="scuro"] .highlight-orange {
    background-color: var(--ts1-stato-stop-bg) !important;
    color: var(--ts1-stato-stop-fg) !important;
    border-color: var(--ts1-stato-stop-fg) !important;
}

html.dark[data-ts1-tema="scuro"] .highlight-darkblue {
    background-color: var(--ts1-brand-soft) !important;
    color: var(--ts1-brand-text) !important;
    border-color: var(--ts1-brand-text) !important;
}

/* ==== FASE 3 - ICONE E IMMAGINI A FONDO BIANCO ===========================================
   refresh.png e print.png (images/set1) sono grigio ardesia su trasparente: sul fondo
   scuro si perdevano. Gli <img> le nominano per src, senza classe comune (79 + 44 righe
   in 51 + 34 file): il selettore per attributo evita di toccarle tutte.
   Ricalibrata il 2026-10-12: a 1.7 andavano quasi sul bianco, 1.35 si legge senza abbagliare.
   print.png non si schiarisce piu': corpo grigio e foglio bianco si leggono gia' sul fondo
   scuro, e schiarita diventava una sagoma bianca. */
html[data-ts1-tema="scuro"] img[src$="images/set1/refresh.png"] {
    filter: brightness(1.35);
}

/* I .jpg piccoli hanno gli angoli BIANCHI: il punto interrogativo e' tondo (gli
   ImageButton di Impianti.ascx e Gruppi.ascx diventano <input type="image">), le
   caselle chkSI/chkNO sono quadrate. Si tagliano gli angoli, il disegno resta. */
html[data-ts1-tema="scuro"] img[src$="images/pinterrogativo.jpg"],
html[data-ts1-tema="scuro"] input[src$="images/pinterrogativo.jpg"] {
    border-radius: 50%;
}

html[data-ts1-tema="scuro"] img[src$="images/chkSI.jpg"],
html[data-ts1-tema="scuro"] img[src$="images/chkNO.jpg"] {
    border-radius: 3px;
}

/* ==== FASE 3 - GRIGLIA DELLA DASHBOARD (default.aspx) ====================================
   Lo <style> della pagina dipinge la griglia azzurra #bed9ed e le tile bianche: (0,2,1)
   batte i suoi (0,1,0). I grafici dentro le tile li ridipinge js/ts1-grafici-tema.js. */
html[data-ts1-tema="scuro"] .grid-stack {
    background: var(--ts1-page-bg);
}

html[data-ts1-tema="scuro"] .grid-stack-item-content {
    background-color: var(--ts1-surface);
    color: var(--ts1-text);
}

/* Titoli h1 "nudi" (le tile della home, default.aspx): style.css:35 li vuole neri (#000) e
   su fondo scuro non si leggono. :where() azzera la specificita' della parte con l'attributo:
   la regola pesa (0,0,1) come "h1" di style.css e vince solo perche' ts1-embed.css si carica
   DOPO (vedi MasterPage.master). Cosi' NON batte h1.ts-t1, .ts-ct1, .ts-t1v, .ts-t2, .ts-ct2,
   .ts-t3, .ts-t4 (style.css:3700, (0,1,1)), che restano del loro azzurro #7ca0c4. */
:where(html[data-ts1-tema="scuro"]) h1 {
    color: var(--ts1-text);
}

/* ==== FASE 4 - PLANNER INTERVENTI (TUI Calendar 1.15) ===================================
   La GRIGLIA la colora js/ts1-calendari-tema.js con setTheme (TUI la scrive in linea, il
   CSS non la raggiunge). Qui popup, pulsanti, menu, frecce e le altre parti che
   css/tui-calendar.min.css dipinge per il bianco: stesso selettore della libreria con
   html[data-ts1-tema="scuro"] davanti, quindi sempre piu' pesante. Accenti blu, guide e
   veli di trascinamento restano: tests/js/temi-web-fase4.test.js (TENUTI_TUI1). */

/* Il contenitore del calendario: TUI 1.15 scrive il fondo in linea SOLO alla creazione
   (Layout.applyTheme nel costruttore) e setTheme non lo ripassa. In linea vince solo
   !important. */
html[data-ts1-tema="scuro"] .tui-full-calendar-layout {
    background-color: var(--ts1-surface) !important;
}

/* Le frecce dei popup sono bordi colorati: la punta interna e' il fondo del popup, quella
   esterna il suo bordo. */
html[data-ts1-tema="scuro"] .tui-full-calendar-popup-container {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-border {
    border-left-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border {
    border-top-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-border {
    border-right-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill {
    border-bottom-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-right .tui-full-calendar-popup-arrow-fill {
    border-left-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill {
    border-top-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-arrow-left .tui-full-calendar-popup-arrow-fill {
    border-right-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-button {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-button:hover {
    border-color: var(--ts1-line);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-button:active {
    background-color: var(--ts1-surface-muted);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-button.tui-full-calendar-popup-close {
    background-color: var(--ts1-surface-strong);
}

/* Griglia: parti che non passano da setTheme. */
html[data-ts1-tema="scuro"] .tui-full-calendar-today {
    background-color: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-weekday-border {
    border-top-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-more-schedules {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-weekday-schedule-bullet-focused {
    background-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-weekday-exceed-in-month:hover {
    background-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-weekday-collapse-btn,
html[data-ts1-tema="scuro"] .tui-full-calendar-weekday-exceed-in-week {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-weekday-filled {
    background-color: var(--ts1-surface-muted) !important;
}

html[data-ts1-tema="scuro"] .tui-full-calendar-timegrid-hour {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-timegrid-gridline {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-timegrid-timezone-close-btn {
    background-color: var(--ts1-surface);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-month-more-title-day,
html[data-ts1-tema="scuro"] .tui-full-calendar-month-more-title-day-label {
    color: var(--ts1-text);
}

/* Popup di creazione/modifica: campi, trattino tra le date, menu a tendina. */
html[data-ts1-tema="scuro"] .tui-full-calendar-section-end-date:focus .tui-datepicker,
html[data-ts1-tema="scuro"] .tui-full-calendar-section-end-date:focus .tui-full-calendar-popup-section-item,
html[data-ts1-tema="scuro"] .tui-full-calendar-section-end-date:hover .tui-datepicker,
html[data-ts1-tema="scuro"] .tui-full-calendar-section-end-date:hover .tui-full-calendar-popup-section-item,
html[data-ts1-tema="scuro"] .tui-full-calendar-section-start-date:focus .tui-datepicker,
html[data-ts1-tema="scuro"] .tui-full-calendar-section-start-date:focus .tui-full-calendar-popup-section-item,
html[data-ts1-tema="scuro"] .tui-full-calendar-section-start-date:hover .tui-datepicker,
html[data-ts1-tema="scuro"] .tui-full-calendar-section-start-date:hover .tui-full-calendar-popup-section-item {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-section-date-dash {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-popup-section-item {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-popup-section-item:hover {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-popup-section-item:focus {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-popup-section-item input::placeholder {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-dropdown:hover .tui-full-calendar-dropdown-button {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-dropdown-menu {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-dropdown:hover .tui-full-calendar-dropdown-menu {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-dropdown-menu-item:hover {
    background-color: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-popup-detail .tui-full-calendar-section-button {
    border-top-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-full-calendar-popup-vertical-line {
    background-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tui-datepicker {
    border-color: var(--ts1-line);
}

/* Barra del planner e pannello laterale (css/style.css). Le bordature di #menuPlanner
   hanno !important nel foglio d'origine: anche le nostre. */
html[data-ts1-tema="scuro"] #menuPlanner ul.dropdown-menu.show {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] #menuPlanner input.move-day {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] #menuPlanner button#dropdownMenu-calendarType,
html[data-ts1-tema="scuro"] #menuPlanner input.move-today {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .btnPlanner {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .btnPlanner:hover {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .btnPlanner:active {
    background-color: var(--ts1-surface-muted);
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .btnPlanner:disabled {
    background-color: var(--ts1-surface-muted);
    border-color: var(--ts1-line);
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .open > .dropdown-toggle.btnPlanner {
    background-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .lnb-calendars > div {
    border-bottom-color: var(--ts1-line);
}

/* Lo <style> di interventi/planner.aspx (tabella dei tecnici): table#calendario th e'
   (1,0,2), qui (1,1,3). Le celle colorate dai colori dei tecnici sono in linea e restano. */
html[data-ts1-tema="scuro"] table#calendario th,
html[data-ts1-tema="scuro"] table#calendario td {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] table#calendario th {
    background-color: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .sticky-row th {
    background-color: var(--ts1-surface);
}

html[data-ts1-tema="scuro"] .hour-column {
    background-color: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

/* ==== FASE 4 - PLANNER CRM (crm/plannercrm.aspx, css/plannercrm.css) ===================
   La griglia di Toast UI 2.1.3 la colora js/ts1-calendari-tema.js (setTheme); qui la
   cornice della pagina. I pallini della legenda hanno i colori dei piani: restano. */
html[data-ts1-tema="scuro"] .plannerCRM-toolbar,
html[data-ts1-tema="scuro"] #plannerCRM-calendar {
    background: var(--ts1-surface);
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .plannerCRM-period,
html[data-ts1-tema="scuro"] .toastui-calendar-day-name-item,
html[data-ts1-tema="scuro"] #plannerCRM-quickBody dd {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] #plannerCRM-quickBody dt {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .plannerCRM-filter-wrap .select2-selection--multiple {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .plannerCRM-legend-item {
    background: var(--ts1-surface-muted);
    border-color: var(--ts1-line);
    color: var(--ts1-text-soft);
}

/* Il foglio di Toast UI 2.1.3 dalla CDN dipinge alcuni colori fissi che setTheme non
   raggiunge; la lista e' in tests/js/temi-web-fase4.test.js, TUI2_CDN, perche' il foglio
   non e' nel repository. Solo i colori: gli spessori restano quelli del foglio. */
html[data-ts1-tema="scuro"] .toastui-calendar-layout .toastui-calendar-panel-resizer:hover {
    border-color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .toastui-calendar-timezone-labels-slot {
    background-color: var(--ts1-surface);
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .toastui-calendar-timezone-labels-slot .toastui-calendar-timegrid-timezone-label {
    background-color: var(--ts1-surface);
    border-right-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .toastui-calendar-timezone-labels-slot .toastui-calendar-timegrid-timezone-collapse-button {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .toastui-calendar-weekday-event-dot+.toastui-calendar-weekday-event-title {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .toastui-calendar-weekday-exceed-in-week {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .toastui-calendar-collapse-btn-icon {
    border-bottom-color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .toastui-calendar-more-title-date {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .toastui-calendar-more-title-day {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .toastui-calendar-vertical-line {
    background: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .toastui-calendar-day-view-day-names {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .toastui-calendar-week-view-day-names {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .toastui-calendar-daygrid-cell+.toastui-calendar-daygrid-cell {
    border-left-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .toastui-calendar-grid-cell-more-events {
    color: var(--ts1-text-soft);
}

/* ==== FASE 4 - GANTT CRM (crm/gantt.aspx, css/gantt.css) ===============================
   HTML e CSS senza libreria: bastano le variabili --gantt-* e i colori fissi. Le barre
   restano (TENUTI_GANTT in tests/js/temi-web-fase4.test.js). */
html[data-ts1-tema="scuro"] {
    --gantt-bg: var(--ts1-surface);
    --gantt-border: var(--ts1-line);
    --gantt-piano-bg: var(--ts1-surface-strong);
    --gantt-bucket-bg: var(--ts1-surface-muted);
    --gantt-today: var(--ts1-stato-attesa-bg);
    --gantt-weekend: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] .gantt-tree,
html[data-ts1-tema="scuro"] .gantt-timeline,
html[data-ts1-tema="scuro"] .gantt-timeline-header {
    background: var(--ts1-surface);
}

html[data-ts1-tema="scuro"] .gantt-tree-header {
    background: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .gantt-tree-row,
html[data-ts1-tema="scuro"] .gantt-timeline-row-month,
html[data-ts1-tema="scuro"] .gantt-timeline-row {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .gantt-tree-row:hover {
    background: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .gantt-tree-row-task:hover {
    background: var(--ts1-brand-soft);
}

html[data-ts1-tema="scuro"] .gantt-title,
html[data-ts1-tema="scuro"] .gantt-tree-row-bucket,
html[data-ts1-tema="scuro"] .gantt-tree-row-task,
html[data-ts1-tema="scuro"] #gantt-quickBody dd {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .gantt-range,
html[data-ts1-tema="scuro"] .gantt-twisty,
html[data-ts1-tema="scuro"] .gantt-empty,
html[data-ts1-tema="scuro"] #gantt-quickBody dt {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .gantt-row-count {
    background: var(--ts1-stato-neutro-bg);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .gantt-timeline-cell-month {
    color: var(--ts1-text);
    border-right-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .gantt-timeline-cell-day {
    color: var(--ts1-text-soft);
    border-right-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .gantt-timeline-cell-day.is-weekend {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .gantt-timeline-cell-day.is-today {
    color: var(--ts1-stato-attesa-fg);
}

/* ==== FASE 4 - DASHBOARD CRM (crm/dashboardCRM.aspx, css/dashboardCRM.css) =============
   Le variabili --dashCRM-* coprono lavagna, colonne, schede e chip; qui anche sidebar,
   barra, testate dei bucket, commenti, markdown e allegati. Il bordo colorato dei bucket
   (--bucket-color) e' il colore scelto dall'utente: resta. Le regole @media della vista
   telefono sono fuori (vedi il piano, Decisioni). */
html[data-ts1-tema="scuro"] {
    --dashCRM-bg: var(--ts1-page-bg);
    --dashCRM-bucket-bg: var(--ts1-surface-muted);
    --dashCRM-bucket-bg-hover: var(--ts1-surface-strong);
    --dashCRM-card-bg: var(--ts1-surface);
    --dashCRM-card-border: var(--ts1-line);
    --dashCRM-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --dashCRM-card-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.55);
    --dashCRM-chip-bg: var(--ts1-brand-soft);
    --dashCRM-chip-fg: var(--ts1-brand-text);
    --dashCRM-text-muted: var(--ts1-text-soft);
}

/* Sidebar. */
html[data-ts1-tema="scuro"] .dashCRM-sidebar {
    background: var(--ts1-surface);
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-header {
    background: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-title,
html[data-ts1-tema="scuro"] .dashCRM-stat-row strong {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-title i,
html[data-ts1-tema="scuro"] .dashCRM-sidebar-item.is-active i {
    color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-close,
html[data-ts1-tema="scuro"] .dashCRM-sidebar-sectionTitle,
html[data-ts1-tema="scuro"] .dashCRM-sidebar-item,
html[data-ts1-tema="scuro"] .dashCRM-sidebar-item i,
html[data-ts1-tema="scuro"] .dashCRM-stat-row {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-close:hover,
html[data-ts1-tema="scuro"] .dashCRM-sidebar-item:hover {
    background: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-item:hover i {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-section {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-item.is-active {
    background: var(--ts1-brand-soft);
    color: var(--ts1-brand-text);
    box-shadow: inset 3px 0 0 var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-badge {
    background: var(--ts1-stato-neutro-bg);
    color: var(--ts1-stato-neutro-fg);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-badge-warn {
    background: var(--ts1-stato-attesa-bg);
    color: var(--ts1-stato-attesa-fg);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-badge-danger {
    background: var(--ts1-stato-stop-bg);
    color: var(--ts1-stato-stop-fg);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-item.is-active .dashCRM-sidebar-badge {
    background: var(--ts1-stato-info-bg);
    color: var(--ts1-stato-info-fg);
}

html[data-ts1-tema="scuro"] .dashCRM-sidebar-stats {
    background: var(--ts1-surface-muted);
}

/* Il pulsante che apre la sidebar: il portale scrive il colore con !important. */
html[data-ts1-tema="scuro"] .dashCRM-toggle-sidebar {
    background: var(--ts1-surface-strong);
    color: var(--ts1-brand-text) !important;
}

html[data-ts1-tema="scuro"] .dashCRM-toggle-sidebar i,
html[data-ts1-tema="scuro"] .dashCRM-toggle-sidebar svg {
    color: var(--ts1-brand-text) !important;
}

html[data-ts1-tema="scuro"] .dashCRM-toggle-sidebar:hover {
    background: var(--ts1-brand-soft);
}

html[data-ts1-tema="scuro"] .dashCRM-toggle-sidebar:hover i,
html[data-ts1-tema="scuro"] .dashCRM-toggle-sidebar:hover svg {
    color: var(--ts1-text) !important;
}

/* Barra, testate dei bucket, schede. */
html[data-ts1-tema="scuro"] .dashCRM-toolbar {
    background: var(--ts1-surface);
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .dashCRM-bucket-header {
    background: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-bucket-count {
    background: var(--ts1-stato-neutro-bg);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-task:hover {
    border-color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .dashCRM-task-title {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-task-stato-1 {
    background: linear-gradient(180deg, var(--ts1-stato-attesa-bg), var(--ts1-surface));
}

html[data-ts1-tema="scuro"] .dashCRM-task-stato-2 {
    background: linear-gradient(180deg, var(--ts1-stato-stop-bg), var(--ts1-surface));
}

/* Modale del task: link attivi nelle etichette. */
html[data-ts1-tema="scuro"] #modalTask .form-floating label a[data-active="1"] {
    color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] #modalTask .form-floating label a[data-active="1"]:hover {
    color: var(--ts1-text);
}

/* Stato vuoto, commenti, assegnatari, allegati. */
html[data-ts1-tema="scuro"] .dashCRM-empty,
html[data-ts1-tema="scuro"] .dashCRM-alleg-upload {
    background: var(--ts1-surface-muted);
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .dashCRM-empty-title {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .dashCRM-timeline-item {
    background: var(--ts1-surface-muted);
    border-left-color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .dashCRM-timeline-user,
html[data-ts1-tema="scuro"] .dashCRM-timeline-text {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-asseg-item,
html[data-ts1-tema="scuro"] .dashCRM-alleg-item {
    background: var(--ts1-surface-muted);
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .dashCRM-alleg-name {
    color: var(--ts1-brand-text);
}

/* Il markdown dei commenti. */
html[data-ts1-tema="scuro"] .dashCRM-md,
html[data-ts1-tema="scuro"] .dashCRM-md h4,
html[data-ts1-tema="scuro"] .dashCRM-md h5,
html[data-ts1-tema="scuro"] .dashCRM-md h6,
html[data-ts1-tema="scuro"] .dashCRM-md strong {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-md em,
html[data-ts1-tema="scuro"] .dashCRM-md del {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .dashCRM-md code {
    background: var(--ts1-surface-strong);
    color: var(--ts1-stato-stop-fg);
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .dashCRM-md a {
    color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .dashCRM-md a:hover {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .dashCRM-md blockquote {
    border-left-color: var(--ts1-line);
    color: var(--ts1-text-soft);
    background: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] .dashCRM-md hr {
    border-top-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .dashCRM-md mark {
    background: var(--ts1-stato-attesa-bg);
}

/* ==== FASE 4 - FLATPICKR, IL RESTO ======================================================
   Il fondo e i testi li veste gia' il blocco flatpickr della Fase 1. Qui hover, oggi,
   selezione, intervalli, frecce del mese, punta del calendario e riga dell'ora: stesso
   selettore di css/flatpickr.min.css con html[data-ts1-tema="scuro"] davanti. Il
   giorno selezionato e' azzurro del brand con testo scuro, come le selezioni del sito. */
html[data-ts1-tema="scuro"] .flatpickr-calendar {
    box-shadow: 1px 0 0 var(--ts1-line), -1px 0 0 var(--ts1-line), 0 1px 0 var(--ts1-line), 0 -1px 0 var(--ts1-line), 0 3px 13px rgba(0, 0, 0, 0.4);
}

html[data-ts1-tema="scuro"] .flatpickr-calendar.hasTime .flatpickr-time {
    border-top-color: var(--ts1-line);
}

/* La punta del calendario: bordo (:before) e riempimento (:after). */
html[data-ts1-tema="scuro"] .flatpickr-calendar.arrowTop:before {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--ts1-surface);
}

html[data-ts1-tema="scuro"] .flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--ts1-surface);
}

/* Mese e frecce del mese. */
html[data-ts1-tema="scuro"] .flatpickr-months .flatpickr-month {
    color: var(--ts1-text);
    fill: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-months .flatpickr-prev-month,
html[data-ts1-tema="scuro"] .flatpickr-months .flatpickr-next-month {
    color: var(--ts1-text);
    fill: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-months .flatpickr-prev-month:hover,
html[data-ts1-tema="scuro"] .flatpickr-months .flatpickr-next-month:hover {
    color: var(--ts1-text-soft);
}

/* Anno e ora: le freccette su/giu' e lo sfondo al passaggio del mouse. */
html[data-ts1-tema="scuro"] .numInputWrapper span {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .numInputWrapper span:hover {
    background: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .numInputWrapper span:active {
    background: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .numInputWrapper span.arrowDown:after {
    border-top-color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .numInputWrapper span svg path {
    fill: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .numInputWrapper:hover,
html[data-ts1-tema="scuro"] .flatpickr-current-month span.cur-month:hover {
    background: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-current-month input.cur-year[disabled],
html[data-ts1-tema="scuro"] .flatpickr-current-month input.cur-year[disabled]:hover {
    color: var(--ts1-text-soft);
}

/* Il menu dei mesi: fondo e testo (le option non ereditano il fondo dal calendario). */
html[data-ts1-tema="scuro"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--ts1-surface);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--ts1-surface-strong);
}

/* Giorni: intervallo e hover/focus. */
html[data-ts1-tema="scuro"] .flatpickr-day.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.prevMonthDay.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.nextMonthDay.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.today.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.prevMonthDay.today.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.nextMonthDay.today.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day:hover,
html[data-ts1-tema="scuro"] .flatpickr-day.prevMonthDay:hover,
html[data-ts1-tema="scuro"] .flatpickr-day.nextMonthDay:hover,
html[data-ts1-tema="scuro"] .flatpickr-day:focus,
html[data-ts1-tema="scuro"] .flatpickr-day.prevMonthDay:focus,
html[data-ts1-tema="scuro"] .flatpickr-day.nextMonthDay:focus {
    background: var(--ts1-surface-strong);
    border-color: var(--ts1-surface-strong);
}

/* Oggi. */
html[data-ts1-tema="scuro"] .flatpickr-day.today {
    border-color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .flatpickr-day.today:hover,
html[data-ts1-tema="scuro"] .flatpickr-day.today:focus {
    border-color: var(--ts1-text-soft);
    background: var(--ts1-text-soft);
    color: var(--ts1-page-bg);
}

/* Selezione e estremi dell'intervallo: azzurro del brand con testo scuro. */
html[data-ts1-tema="scuro"] .flatpickr-day.selected,
html[data-ts1-tema="scuro"] .flatpickr-day.startRange,
html[data-ts1-tema="scuro"] .flatpickr-day.endRange,
html[data-ts1-tema="scuro"] .flatpickr-day.selected.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.startRange.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.endRange.inRange,
html[data-ts1-tema="scuro"] .flatpickr-day.selected:focus,
html[data-ts1-tema="scuro"] .flatpickr-day.startRange:focus,
html[data-ts1-tema="scuro"] .flatpickr-day.endRange:focus,
html[data-ts1-tema="scuro"] .flatpickr-day.selected:hover,
html[data-ts1-tema="scuro"] .flatpickr-day.startRange:hover,
html[data-ts1-tema="scuro"] .flatpickr-day.endRange:hover,
html[data-ts1-tema="scuro"] .flatpickr-day.selected.prevMonthDay,
html[data-ts1-tema="scuro"] .flatpickr-day.startRange.prevMonthDay,
html[data-ts1-tema="scuro"] .flatpickr-day.endRange.prevMonthDay,
html[data-ts1-tema="scuro"] .flatpickr-day.selected.nextMonthDay,
html[data-ts1-tema="scuro"] .flatpickr-day.startRange.nextMonthDay,
html[data-ts1-tema="scuro"] .flatpickr-day.endRange.nextMonthDay {
    background: var(--ts1-brand-text);
    box-shadow: none;
    color: var(--ts1-page-bg);
    border-color: var(--ts1-brand-text);
}

/* Giorni spenti: il fondo e il bordo restano trasparenti anche al passaggio del mouse. */
html[data-ts1-tema="scuro"] .flatpickr-day.flatpickr-disabled:hover,
html[data-ts1-tema="scuro"] .flatpickr-day.notAllowed,
html[data-ts1-tema="scuro"] .flatpickr-day.notAllowed.prevMonthDay,
html[data-ts1-tema="scuro"] .flatpickr-day.notAllowed.nextMonthDay {
    color: var(--ts1-text-soft);
    background: transparent;
    border-color: transparent;
}

/* Numeri di settimana. */
html[data-ts1-tema="scuro"] .flatpickr-weekwrapper span.flatpickr-day,
html[data-ts1-tema="scuro"] .flatpickr-weekwrapper span.flatpickr-day:hover {
    color: var(--ts1-text-soft);
    background: transparent;
}

/* Riga dell'ora. */
html[data-ts1-tema="scuro"] .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-time input,
html[data-ts1-tema="scuro"] .flatpickr-time .flatpickr-time-separator,
html[data-ts1-tema="scuro"] .flatpickr-time .flatpickr-am-pm {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .flatpickr-time input:hover,
html[data-ts1-tema="scuro"] .flatpickr-time .flatpickr-am-pm:hover,
html[data-ts1-tema="scuro"] .flatpickr-time input:focus,
html[data-ts1-tema="scuro"] .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--ts1-surface-strong);
}

/* Le ombre che disegnano le fasce dell'intervallo, il ponte tra inizio e fine, la
   settimana selezionata e i separatori: stessi scostamenti del foglio d'origine. */
html[data-ts1-tema="scuro"] .flatpickr-day.inRange {
    box-shadow: -5px 0 0 var(--ts1-surface-strong), 5px 0 0 var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
    box-shadow: -2px 0 0 var(--ts1-surface-strong), 5px 0 0 var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
html[data-ts1-tema="scuro"] .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
html[data-ts1-tema="scuro"] .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .flatpickr-day.week.selected {
    box-shadow: -5px 0 0 var(--ts1-brand-text), 5px 0 0 var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 var(--ts1-line);
}

html[data-ts1-tema="scuro"] .flatpickr-weekwrapper .flatpickr-weeks {
    box-shadow: 1px 0 0 var(--ts1-line);
}

/* ==== FASE 4 - TREEVIEW DELLE DISTINTE BASE (prodotti/distintaBase.aspx) ==============
   L'albero dell'esplosione (creaCollapseList) usa .sidebar-btn-toggle di css/style.css,
   come il menu laterale della MasterPage: questa regola vale per entrambi. La freccia
   e' un SVG in content: url(), che non legge le variabili, quindi qui c'e' una sua copia
   col tratto chiaro. Il verde delle quantita' in uscita (#006600) passa al verde di stato;
   rosso e magenta restano. */
html[data-ts1-tema="scuro"] .sidebar-btn-toggle {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .sidebar-btn-toggle:hover,
html[data-ts1-tema="scuro"] .sidebar-btn-toggle:focus {
    color: var(--ts1-text);
    background-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .sidebar-btn-toggle::before {
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.6%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

html[data-ts1-tema="scuro"] .sidebar-btn-toggle[aria-expanded="true"] {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .sidebar-btn-toggle-nav a:hover,
html[data-ts1-tema="scuro"] .sidebar-btn-toggle-nav a:focus {
    background-color: var(--ts1-surface-strong);
}

/* Ultimo, come nel foglio d'origine: sui nodi con figli vince sul colore del nodo. */
html[data-ts1-tema="scuro"] .ts-color-green {
    color: var(--ts1-stato-ok-fg);
}

/* ==== FASE 5 - CSS/STYLE.CSS, IL RESTO ==================================================
   Ogni selettore di css/style.css che dipinge un colore e non era ancora vestito:
   stesso selettore con html[data-ts1-tema="scuro"] davanti. Quelli che restano apposta
   (accenti saturi) e quelli gia' vestiti da una regola generale sono elencati, con la
   ragione, in tests/js/temi-web-fase5.test.js (STYLE_TENUTI, STYLE_COPERTI). */

/* Link che non sono <a> (o che stanno dentro un <a>): il blu #1258a7 sparisce sullo scuro.
   Il portale li dichiara con !important (text-decoration, background): la gemella pure. */
html[data-ts1-tema="scuro"] .tslink,
html[data-ts1-tema="scuro"] table.mGrid > tbody > tr > td > a :focus,
html[data-ts1-tema="scuro"] table.mGrid > tbody > tr > td > a :hover,
html[data-ts1-tema="scuro"] .btn2lnk:hover {
    color: var(--ts1-brand-text) !important;
}

html[data-ts1-tema="scuro"] .ts-color-link,
html[data-ts1-tema="scuro"] .btn_link,
html[data-ts1-tema="scuro"] .lnk_r,
html[data-ts1-tema="scuro"] .schedule-time,
html[data-ts1-tema="scuro"] .ts-color-blue {
    color: var(--ts1-brand-text);
}

html[data-ts1-tema="scuro"] .ts-color-blue-ribbon {
    color: var(--ts1-brand-text) !important;
}

html[data-ts1-tema="scuro"] .dt-loader-spinner,
html[data-ts1-tema="scuro"] .ts-underline-left {
    color: var(--ts1-brand-text);
}

/* Testi neri o grigi delle pagine piu' vecchie. */
html[data-ts1-tema="scuro"] .desk_lnk,
html[data-ts1-tema="scuro"] .btn_c_zoom:hover,
html[data-ts1-tema="scuro"] .mGrid .pgr a:hover,
html[data-ts1-tema="scuro"] ul.tabs li a:visited {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .btn_c_zoom,
html[data-ts1-tema="scuro"] .placeholder,
html[data-ts1-tema="scuro"] .ts-color-dove-gray,
html[data-ts1-tema="scuro"] .calc-operation-indicator {
    color: var(--ts1-text-soft);
}

/* Campi: bordi azzurri o grigi, e le versioni disabilitate a fondo #e6e7eb. */
html[data-ts1-tema="scuro"] .form-floating > .form-control.customFloating,
html[data-ts1-tema="scuro"] .form-floating > .form-control-plaintext.customFloating,
html[data-ts1-tema="scuro"] .form-floating > .form-select.customFloating,
html[data-ts1-tema="scuro"] textarea.aspTextBox:hover:not(:disabled),
html[data-ts1-tema="scuro"] .txt_dett:not(.ts-txt-lg):hover:not(:disabled),
html[data-ts1-tema="scuro"] .txt_dett.ts-txt-lg:hover:not(:disabled),
html[data-ts1-tema="scuro"] .ts-txt-max,
html[data-ts1-tema="scuro"] .ts-txt-sm,
html[data-ts1-tema="scuro"] input.dt-search,
html[data-ts1-tema="scuro"] input.dt-search:hover {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .aspTextBox:disabled {
    background-color: var(--ts1-surface-strong);
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] textarea.aspTextBox:disabled {
    background-color: var(--ts1-surface-strong) !important;
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .ts-txt-md:disabled,
html[data-ts1-tema="scuro"] span.disabled,
html[data-ts1-tema="scuro"] .ts-txt-max:disabled,
html[data-ts1-tema="scuro"] .ts-txt-sm:disabled {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
}

/* Sola lettura: stessa tinta della regola ancorata della Fase 0 (sopra, "I CAMPI DI SOLA
   LETTURA"), qui nella forma esatta del portale. */
html[data-ts1-tema="scuro"] input[type="text"][readonly]:not(.js-filter-list, .customReadOnly):not(.js-filter-list-dt),
html[data-ts1-tema="scuro"] input[type="text"][readonly].js-filter-list {
    background-color: var(--ts1-surface-strong) !important;
}

/* Il bordo della casella: #585858 sullo scuro non si vede, e la casella vuota sparirebbe. */
html[data-ts1-tema="scuro"] .form-check-input {
    border-color: var(--ts1-text-soft) !important;
}

/* La linguetta con il fuoco: nel portale il bordo bianco si confonde con la pagina. */
html[data-ts1-tema="scuro"] ul.nav-tabs > li > button.nav-link:focus {
    border-color: var(--ts1-line) !important;
}

/* Il campo select2 in errore: la regola scura generale di select2 (bordo !important,
   piu' pesante) spegnerebbe il rosso. Il rosso e' un accento e resta. */
html[data-ts1-tema="scuro"] .select2-container--default.chosen-error .select2-selection--single {
    border: 1px #ff4747 solid !important;
}

/* I blocchi di codice per linguaggio (pre[data-language]): pastelli che diventano veli. */
html[data-ts1-tema="scuro"] pre[data-language="Testo semplice"],
html[data-ts1-tema="scuro"] pre[data-language="plaintext"],
html[data-ts1-tema="scuro"] pre[data-language="Java"],
html[data-ts1-tema="scuro"] pre[data-language="java"] {
    background-color: var(--ts1-surface-muted) !important;
    border: 1px solid var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] pre[data-language="C"],
html[data-ts1-tema="scuro"] pre[data-language="c"],
html[data-ts1-tema="scuro"] pre[data-language="C#"],
html[data-ts1-tema="scuro"] pre[data-language="cs"],
html[data-ts1-tema="scuro"] pre[data-language="C++"],
html[data-ts1-tema="scuro"] pre[data-language="cpp"],
html[data-ts1-tema="scuro"] pre[data-language="XML"],
html[data-ts1-tema="scuro"] pre[data-language="xml"] {
    background-color: var(--ts1-stato-ok-bg) !important;
    border: 1px solid var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] pre[data-language="CSS"],
html[data-ts1-tema="scuro"] pre[data-language="css"],
html[data-ts1-tema="scuro"] pre[data-language="SQL"],
html[data-ts1-tema="scuro"] pre[data-language="sql"],
html[data-ts1-tema="scuro"] pre[data-language="Swift"],
html[data-ts1-tema="scuro"] pre[data-language="swift"] {
    background-color: var(--ts1-brand-soft) !important;
    border: 1px solid var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] pre[data-language="HTML"],
html[data-ts1-tema="scuro"] pre[data-language="html"],
html[data-ts1-tema="scuro"] pre[data-language="JavaScript"],
html[data-ts1-tema="scuro"] pre[data-language="javascript"],
html[data-ts1-tema="scuro"] pre[data-language="TypeScript"],
html[data-ts1-tema="scuro"] pre[data-language="typescript"],
html[data-ts1-tema="scuro"] pre[data-language="Visual Basic"],
html[data-ts1-tema="scuro"] pre[data-language="vb"] {
    background-color: var(--ts1-stato-attesa-bg) !important;
    border: 1px solid var(--ts1-line) !important;
}

html[data-ts1-tema="scuro"] pre[data-language="jQuery"],
html[data-ts1-tema="scuro"] pre[data-language="jquery"] {
    background-color: var(--ts1-stato-stop-bg) !important;
    border: 1px solid var(--ts1-line) !important;
}

/* Le scorciatoie della home e il pulsante di assistenza: bordo e passaggio azzurri. */
html[data-ts1-tema="scuro"] .ts-tetrasupport {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .ts-tetrasupport:hover,
html[data-ts1-tema="scuro"] .ts-shortcutLink:hover {
    background-color: var(--ts1-brand-soft);
    color: var(--ts1-text);
}

/* Permessi (amministrazione): righe tratteggiate, passaggio grigio, selezione gialla. */
html[data-ts1-tema="scuro"] .PermessiTD {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .PermessiTD:hover,
html[data-ts1-tema="scuro"] .PermessiGruppoTD:hover,
html[data-ts1-tema="scuro"] .PermessiSpecialiTD:hover {
    background-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .PermessiTDy,
html[data-ts1-tema="scuro"] .PermessiGruppoTDy {
    border-bottom-color: var(--ts1-line);
    background-color: var(--ts1-stato-attesa-bg);
}

/* Le griglie ASP.NET (mGrid, Gridview, GridBorder, pagr, d0/d1): testate a sfumatura
   azzurra, righe alterne, bordi grigi. */
html[data-ts1-tema="scuro"] .GridviewTable tr {
    color: var(--ts1-text);
    background-color: var(--ts1-brand-soft);
}

html[data-ts1-tema="scuro"] .Gridview th {
    color: var(--ts1-text);
    border-color: var(--ts1-line);
    border-top-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .Gridview td,
html[data-ts1-tema="scuro"] .mGrid td {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .mGrid th,
html[data-ts1-tema="scuro"] .HeadermGrid,
html[data-ts1-tema="scuro"] .GridHeader {
    color: var(--ts1-text);
    background-image: none;
    background-color: var(--ts1-surface-strong);
    border-left-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .mGrid .alt {
    background: var(--ts1-brand-soft);
}

html[data-ts1-tema="scuro"] .mGrid .pgr {
    background: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .mGrid .pgr td,
html[data-ts1-tema="scuro"] div.pagr td {
    border-left-color: var(--ts1-line);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] tr.d1 td {
    background-color: var(--ts1-surface-muted);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] tr.testata {
    background-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .GridBorder {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .GridBorder td {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .GridBorder th {
    background: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] table.dataTable.no-footer {
    border-bottom-color: var(--ts1-line) !important;
}

/* Il velo bianco di DataTables mentre elabora. */
html[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_processing {
    background: var(--ts1-surface);
}

/* Pulsanti a icona grigi: fondo come .icon_btn (sopra), passaggio un gradino piu' chiaro.
   !important perche' .icon_btn scuro lo e'. */
html[data-ts1-tema="scuro"] .tableimg {
    background-color: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] .icon_btn:hover,
html[data-ts1-tema="scuro"] .tableimg:hover {
    background-color: var(--ts1-line) !important;
}

/* Fondi pastello di stato e grigi chiari. */
html[data-ts1-tema="scuro"] .dis,
html[data-ts1-tema="scuro"] .dis:hover {
    background-color: var(--ts1-stato-stop-bg);
}

html[data-ts1-tema="scuro"] .tbl-dett {
    background-color: var(--ts1-stato-attesa-bg);
}

html[data-ts1-tema="scuro"] .ts-detail,
html[data-ts1-tema="scuro"] .sel-misura-field,
html[data-ts1-tema="scuro"] .tfiltri .r {
    background-color: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] .sf-menu li:hover,
html[data-ts1-tema="scuro"] .sf-menu li.sfHover {
    background: var(--ts1-brand-soft) !important;
}

html[data-ts1-tema="scuro"] .ts-list-detail-header {
    border-bottom-color: var(--ts1-line);
    background-color: var(--ts1-surface-strong);
}

/* Bordi grigi di riquadri, righe e separatori. */
html[data-ts1-tema="scuro"] .c_descr,
html[data-ts1-tema="scuro"] .oriz-scroll,
html[data-ts1-tema="scuro"] .oriz-scroll_sa,
html[data-ts1-tema="scuro"] .oriz-scroll-dett,
html[data-ts1-tema="scuro"] .calendar-bar {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .tfiltri td,
html[data-ts1-tema="scuro"] .ts-list-detail-body,
html[data-ts1-tema="scuro"] .calculation-row {
    border-bottom-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .weekday-grid-more-schedules {
    border-color: var(--ts1-line);
    color: var(--ts1-text);
}

/* Le voci dei menu contestuali: tratteggio grigio sotto, bianco (invisibile) sugli altri lati. */
html[data-ts1-tema="scuro"] .vmenu .sez,
html[data-ts1-tema="scuro"] .ts-custom-menu .sez {
    border-color: var(--ts1-surface);
    border-bottom-color: var(--ts1-line);
}

/* I pulsanti colorati delle griglie (grid_btn_*): pastelli che diventano veli, e il
   passaggio giallo #FD0 come quello di .vmenu .sez (Fase 1). !important perche'
   .grid_btn_white scuro lo e'. */
html[data-ts1-tema="scuro"] .grid_btn_lightgrey {
    background-color: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] .grid_btn_salmon {
    background-color: var(--ts1-stato-attesa-bg);
}

html[data-ts1-tema="scuro"] .grid_btn_grey {
    background-color: var(--ts1-stato-neutro-bg);
}

html[data-ts1-tema="scuro"] .grid_btn_olivine {
    background-color: var(--ts1-stato-ok-bg);
}

html[data-ts1-tema="scuro"] .grid_btn_seapink {
    background-color: var(--ts1-stato-stop-bg);
}

html[data-ts1-tema="scuro"] .grid_btn:hover,
html[data-ts1-tema="scuro"] .grid_btn_white:hover,
html[data-ts1-tema="scuro"] .grid_btn_lightgrey:hover,
html[data-ts1-tema="scuro"] .grid_btn_lightgreen:hover,
html[data-ts1-tema="scuro"] .grid_btn_lightblue:hover,
html[data-ts1-tema="scuro"] .grid_btn_black:hover,
html[data-ts1-tema="scuro"] .grid_btn_red:hover,
html[data-ts1-tema="scuro"] .grid_btn_salmon:hover,
html[data-ts1-tema="scuro"] .grid_btn_grey:hover,
html[data-ts1-tema="scuro"] .grid_btn_olivine:hover,
html[data-ts1-tema="scuro"] .grid_btn_seapink:hover,
html[data-ts1-tema="scuro"] nav dropdown-item:focus {
    background-color: var(--ts1-surface-strong) !important;
}

/* La barra del filtro blu (#t_ftable/.js-t_ftable) e' tenuta: i suoi link restano bianchi,
   altrimenti la regola scura dei link (a:not(.btn)..., (0,3,2), piu' pesante) li farebbe
   azzurri sul blu: per questo !important. */
html[data-ts1-tema="scuro"] .js-t_ftable a {
    color: #FFF !important;
}

/* Le linguette ul.tabs delle pagine piu' vecchie. Il colore va !important: e' un <a>, e
   la regola scura dei link (piu' pesante) le farebbe azzurre. */
html[data-ts1-tema="scuro"] ul.tabs li a {
    border-color: var(--ts1-line);
    color: var(--ts1-text) !important;
}

html[data-ts1-tema="scuro"] ul.tabs li a:hover {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] ul.tabs li.selected a,
html[data-ts1-tema="scuro"] ul.tabs li.selected a:hover {
    background-image: none;
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
}

/* Anteprima del foglio etichette (Wizard Etichette, js/app.js). */
html[data-ts1-tema="scuro"] #etichetta-preview.test {
    border-color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .etichetta.test {
    background-color: var(--ts1-brand-soft);
    border-color: var(--ts1-text-soft);
}

/* Calcolatrice (amministrazione): il tasto premuto. */
html[data-ts1-tema="scuro"] .calc-btn.pressed {
    background-color: var(--ts1-surface-strong) !important;
}

/* Colori scritti per nome (gray, black): le sottolineature di stato degli elenchi (grigio =
   fatturata, nero = sospensione, sistemaappalti/contratti_elenco.aspx) e i fili delle
   etichette e delle tabelle. */
html[data-ts1-tema="scuro"] .ts-underline-grey {
    border-bottom-color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .ts-underline-black {
    border-bottom-color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .ts-border-1g,
html[data-ts1-tema="scuro"] .ts-border-1b {
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .ts-border-right-1g {
    border-right-color: var(--ts1-line);
}

/* ==== FASE 5 - LIBRERIE DEL SITO (select2, chosen, tabcontent, signature-pad, gridstack) ==
   Stesso metodo di style.css: gemelle, tenuti e coperti in tests/js/temi-web-fase5.test.js
   (LIBRERIE). */

/* select2, tema default: segnaposto e freccia grigi, voci disabilitate e gia' scelte. */
html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ts1-text-soft) transparent transparent transparent;
}

html[data-ts1-tema="scuro"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--ts1-text-soft) transparent;
}

/* La voce disabilitata: la regola scura generale delle voci (.select2-results__option,
   (0,2,1)) la farebbe chiara come le altre. */
html[data-ts1-tema="scuro"] .select2-container--default .select2-results__option--disabled,
html[data-ts1-tema="scuro"] .select2-container--classic .select2-results__option--disabled {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .select2-container--default .select2-results__option--selected {
    background-color: var(--ts1-surface-strong);
}

/* La X delle pillole: il colore lo impone gia' la regola scura .select2-selection__choice__remove
   (!important, stesso valore); quello che manca e' il filo che la separa dal testo. */
html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right-color: var(--ts1-line);
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    border-left-color: var(--ts1-line);
}

/* Al passaggio sulla X: !important perche' la regola scura della X lo e'. La pillola e'
   gia' --ts1-surface-strong, quindi il fondo al passaggio va nell'altro verso. */
html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
html[data-ts1-tema="scuro"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: var(--ts1-surface-muted);
    color: var(--ts1-text) !important;
}

html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--ts1-text) !important;
}

/* select2, tema classic: nessuna pagina lo attiva oggi (nessun theme: 'classic'), ma il
   foglio lo porta e il banco lo guarda. Tendina, pillole e campo di ricerca li vestono
   gia' le regole scure generali (vedi LIBRERIE, coperti). */
html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--single,
html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--multiple {
    background-color: var(--ts1-surface-muted);
    background-image: none;
    border-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: var(--ts1-surface-strong);
    background-image: none;
    border-left-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    border-right-color: var(--ts1-line);
}

html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--single .select2-selection__arrow b {
    border-color: var(--ts1-text-soft) transparent transparent transparent;
}

html[data-ts1-tema="scuro"] .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--ts1-text-soft) transparent;
}

/* Il bordo blu del fuoco e dell'apertura e' un accento e resta: lo si ripete perche' le due
   gemelle qui sopra (0,3,1) peserebbero piu' degli originali (0,3,0) e lo spegnerebbero. */
html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--single:focus,
html[data-ts1-tema="scuro"] .select2-container--classic.select2-container--open .select2-selection--single,
html[data-ts1-tema="scuro"] .select2-container--classic .select2-selection--multiple:focus,
html[data-ts1-tema="scuro"] .select2-container--classic.select2-container--open .select2-selection--multiple {
    border-color: #5897fb;
}

/* chosen (le pagine *_old): il campo singolo, la tendina e le pillole li veste gia' la
   Fase 1. Qui il resto. */
/* Il segnaposto: la regola scura di .chosen-single (stesso elemento, !important) lo
   farebbe chiaro come il testo scelto. html.dark per pesare di piu'. */
html.dark[data-ts1-tema="scuro"] .chosen-container-single .chosen-default {
    color: var(--ts1-text-soft) !important;
}

html[data-ts1-tema="scuro"] .chosen-container .chosen-results {
    color: var(--ts1-text);
}

/* Voci disabilitate e gia' scelte: la regola scura generale delle voci (0,3,2) le farebbe
   chiare come le altre. */
html[data-ts1-tema="scuro"] .chosen-container .chosen-results li.disabled-result,
html[data-ts1-tema="scuro"] .chosen-container-multi .chosen-drop .result-selected {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .chosen-container .chosen-results li.no-results {
    color: var(--ts1-text-soft);
    background: var(--ts1-surface-muted);
}

/* !important come l'originale (che lo ha sull'altezza). */
html[data-ts1-tema="scuro"] .chosen-container-multi .chosen-choices {
    border-color: var(--ts1-line) !important;
    background-color: var(--ts1-surface-muted) !important;
    background-image: none !important;
}

html[data-ts1-tema="scuro"] .chosen-container-multi .chosen-choices li.search-field input[type=text] {
    color: var(--ts1-text-soft) !important;
}

html[data-ts1-tema="scuro"] .chosen-container-active .chosen-choices li.search-field input[type=text] {
    color: var(--ts1-text) !important;
}

/* Il bordo blu del campo attivo e' un accento e resta. Le regole scure di .chosen-single e
   di .chosen-choices sono !important: html.dark e !important per pesare di piu'; a tendina
   aperta il campo singolo torna al filo grigio, come nel chiaro. */
html.dark[data-ts1-tema="scuro"] .chosen-container-active .chosen-choices {
    border-color: #5897fb !important;
}

html.dark[data-ts1-tema="scuro"] .chosen-container-active .chosen-single {
    border-color: #5897fb !important;
}

html.dark[data-ts1-tema="scuro"] .chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--ts1-line) !important;
}

/* tabcontent: le linguette ul.tabs hanno il fondo grigio #F0F0F0 con l'immagine tabbg.gif
   (style.css le veste gia' per bordo e testo, regole scure piu' su). La forma breve
   `background` toglie anche l'immagine chiara. La linguetta scelta e' gia' vestita. */
html[data-ts1-tema="scuro"] ul.tabs li a {
    background: var(--ts1-surface-muted);
}

html[data-ts1-tema="scuro"] ul.tabs li a:hover {
    background: var(--ts1-surface-strong);
}

/* Il riquadro sotto le linguette: filo azzurro #8dc8eb, come il bordo basso delle
   linguette, che in scuro e' gia' --ts1-line. */
html[data-ts1-tema="scuro"] div.tabcontents {
    border-color: var(--ts1-line);
}

/* gridstack: l'ombra del posto dove cade la tile trascinata, velo nero al 10% che sul fondo
   scuro della griglia non si vedrebbe. !important come l'originale (che lo ha sullo z-index). */
html[data-ts1-tema="scuro"] .grid-stack .grid-stack-placeholder > .placeholder-content {
    background-color: var(--ts1-surface-muted) !important;
}

/* bg-white e' bianco fisso con !important anche in data-bs-theme="dark". Unico uso:
   _manutenzione/verificalicenze.aspx:52. */
html[data-ts1-tema="scuro"] .bg-white {
    background-color: var(--ts1-surface) !important;
}

/* ==== FASE 5 - DATATABLES =================================================================
   Le Fasi 1-2 vestono gia' tabelle, righe e colonne colorate: qui il resto della libreria
   (strisce, ordinamento, paginazione, elaborazione, pulsanti). Coperti e tenuti in
   tests/js/temi-web-fase5.test.js (DATATABLES_COPERTI, DATATABLES_TENUTI).
   ⚠️ In scuro l'<html> porta anche la classe `dark`, e datatables.min.css ha un suo tema
   scuro su `html.dark …` e `html[data-bs-theme=dark] …` (grigi suoi, rgb(33,37,41)). Per
   questo le gemelle qui sotto partono da html.dark[data-ts1-tema="scuro"]: pesano (0,1,0)
   piu' di quelle regole, che il banco elenca come COPERTE dalla gemella sullo stesso
   elemento. Strisce, colonna ordinata e passaggio sono ombre interne su variabili
   (--dt-row-stripe, --dt-column-ordering, --dt-row-hover) che html.dark volge gia' al
   bianco trasparente: restano alla libreria. */

/* :root.dark pesa (0,2,0) e batteva la variabile data piu' in alto (0,1,1): il fondo
   opaco della libreria restava rgb(33,37,41). */
html.dark[data-ts1-tema="scuro"] {
    --dt-html-background: var(--ts1-surface);
}

/* Le frecce delle righe espandibili (dettaglio e Responsive). !important sulle seconde
   perche' html.dark … td.dtr-control:before lo e'. */
html.dark[data-ts1-tema="scuro"] table.dataTable td.dt-control:before,
html.dark[data-ts1-tema="scuro"] table.dataTable tr.dt-hasChild td.dt-control:before {
    color: var(--ts1-text-soft);
}

html.dark[data-ts1-tema="scuro"] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
html.dark[data-ts1-tema="scuro"] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
html.dark[data-ts1-tema="scuro"] table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
html.dark[data-ts1-tema="scuro"] table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
html.dark[data-ts1-tema="scuro"] table.dataTable.dtr-column > tbody > tr > td.control:before,
html.dark[data-ts1-tema="scuro"] table.dataTable.dtr-column > tbody > tr > th.control:before,
html.dark[data-ts1-tema="scuro"] table.dataTable > tbody > tr > td.dtr-control:before {
    color: var(--ts1-text-soft) !important;
}

/* Le linee della tabella: sotto l'intestazione, sopra il piede, fra le righe e le celle. */
html.dark[data-ts1-tema="scuro"] table.dataTable > thead > tr > th,
html.dark[data-ts1-tema="scuro"] table.dataTable > thead > tr > td {
    border-bottom-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] table.dataTable > tfoot > tr > th,
html.dark[data-ts1-tema="scuro"] table.dataTable > tfoot > tr > td {
    border-top-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] table.dataTable.row-border > tbody > tr > th,
html.dark[data-ts1-tema="scuro"] table.dataTable.row-border > tbody > tr > td,
html.dark[data-ts1-tema="scuro"] table.dataTable.display > tbody > tr > th,
html.dark[data-ts1-tema="scuro"] table.dataTable.display > tbody > tr > td {
    border-top-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] table.dataTable.cell-border > tbody > tr > th,
html.dark[data-ts1-tema="scuro"] table.dataTable.cell-border > tbody > tr > td {
    border-top-color: var(--ts1-line);
    border-right-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] table.dataTable.cell-border > tbody > tr > th:first-child,
html.dark[data-ts1-tema="scuro"] table.dataTable.cell-border > tbody > tr > td:first-child {
    border-left-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom-color: var(--ts1-line);
}

/* Due righe selezionate di fila: il filo blu fra loro e' l'accento della selezione. Si
   ripete perche' la gemella delle linee qui sopra pesa piu' dell'originale e lo spegnerebbe. */
html.dark[data-ts1-tema="scuro"] table.dataTable.row-border > tbody > tr.selected + tr.selected > td,
html.dark[data-ts1-tema="scuro"] table.dataTable.display > tbody > tr.selected + tr.selected > td {
    border-top-color: #0262ef;
}

/* Il link nella riga selezionata (blu pieno): quasi nero nel chiaro, chiaro qui. Senza, la
   regola dei link (0,3,2) lo farebbe azzurro su blu. */
html[data-ts1-tema="scuro"] table.dataTable tbody tr.selected a {
    color: var(--ts1-text);
}

/* La casella della selezione (estensione Select): il contorno, bianco sulla riga scelta.
   Il bianco si ripete perche' la prima regola pesa piu' del suo originale. */
html.dark[data-ts1-tema="scuro"] table.dataTable > tbody > tr > td.select-checkbox:before,
html.dark[data-ts1-tema="scuro"] table.dataTable > tbody > tr > th.select-checkbox:before {
    border-color: var(--ts1-text-soft);
}

html.dark[data-ts1-tema="scuro"] table.dataTable > tbody > tr.selected > td.select-checkbox:before,
html.dark[data-ts1-tema="scuro"] table.dataTable > tbody > tr.selected > th.select-checkbox:before {
    border-color: white;
}

/* La paginazione. Il colore del testo e' !important come negli originali. Il disabilitato
   ripete bordo e fondo trasparenti: la gemella del passaggio pesa piu' del suo originale. */
html.dark[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: inherit !important;
    border-color: var(--ts1-line);
    background: var(--ts1-surface-muted);
}

html.dark[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--ts1-text) !important;
    border-color: var(--ts1-line);
    background: var(--ts1-surface-strong);
}

html.dark[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: var(--ts1-surface-muted);
}

html.dark[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
html.dark[data-ts1-tema="scuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--ts1-text-soft) !important;
    border-color: transparent;
    background: transparent;
}

/* Pulsanti (Buttons): la barra e' gia' vestita piu' in alto (senza fondo); qui il resto. */
html.dark[data-ts1-tema="scuro"] span.dt-button-spacer.bar {
    border-left-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] div.dt-button-collection span.dt-button-spacer.bar {
    border-bottom-color: var(--ts1-line);
}

/* !important: la regola della barra (div.dt-buttons > .dt-button) lo e' sul colore. */
html.dark[data-ts1-tema="scuro"] .dt-button.processing {
    color: var(--ts1-text-soft) !important;
}

/* La rotellina: solo sopra e sotto, i lati restano trasparenti come nell'originale. */
html.dark[data-ts1-tema="scuro"] .dt-button.processing:after {
    border-top-color: var(--ts1-text);
    border-bottom-color: var(--ts1-text);
}

html.dark[data-ts1-tema="scuro"] div.dt-button-info,
html.dark[data-ts1-tema="scuro"] div.dt-button-collection {
    border-color: var(--ts1-line);
    background-color: var(--ts1-surface-strong);
}

html.dark[data-ts1-tema="scuro"] div.dt-button-collection.fixed {
    background-color: var(--ts1-surface-strong);
}

/* Nel chiaro e' un bianco al 10% sul bianco della tendina, cioe' non si vede: qui uguale. */
html.dark[data-ts1-tema="scuro"] div.dt-button-collection.fixed .dt-button {
    background: var(--ts1-surface-strong);
}

html.dark[data-ts1-tema="scuro"] div.dt-button-collection .dt-button:hover:not(.disabled) {
    background: var(--ts1-surface-muted);
}

/* Le parti opache: colonna trascinata (ColReorder), riga trascinata (RowReorder), testata
   fissa (FixedHeader), angoli di FixedColumns, tabella di Scroller. !important dove
   l'originale lo ha (sulla posizione o sul margine). */
html.dark[data-ts1-tema="scuro"] table.DTCR_clonedTable.dataTable,
html.dark[data-ts1-tema="scuro"] div.dt-rowReorder-float-parent table.dt-rowReorder-float,
html.dark[data-ts1-tema="scuro"] table.fixedHeader-locked {
    background-color: var(--ts1-surface) !important;
}

html.dark[data-ts1-tema="scuro"] table.fixedHeader-floating,
html.dark[data-ts1-tema="scuro"] div.dtfc-left-top-blocker,
html.dark[data-ts1-tema="scuro"] div.dtfc-right-top-blocker,
html.dark[data-ts1-tema="scuro"] div.dts div.dataTables_scrollBody table {
    background-color: var(--ts1-surface);
}

/* Scroller: le strisce d'attesa mentre arrivano le righe, e l'etichetta della posizione. */
html.dark[data-ts1-tema="scuro"] div.dts div.dataTables_scrollBody {
    background: repeating-linear-gradient(45deg, var(--ts1-surface-muted), var(--ts1-surface-muted) 10px, transparent 10px, transparent 20px);
}

html.dark[data-ts1-tema="scuro"] div.dts div.dts_label {
    background: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

/* Responsive: le righe del dettaglio e la finestra. */
html.dark[data-ts1-tema="scuro"] table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] div.dtr-modal div.dtr-modal-display {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
}

/* StateRestore: le finestre, i loro pulsanti e il campo del nome. */
html.dark[data-ts1-tema="scuro"] div.dtsr-confirmation,
html.dark[data-ts1-tema="scuro"] div.dtsr-creation {
    background-color: var(--ts1-surface-strong);
    border-color: var(--ts1-line);
}

html.dark[data-ts1-tema="scuro"] div.dtsr-confirmation button,
html.dark[data-ts1-tema="scuro"] div.dtsr-creation button {
    border-color: var(--ts1-line);
    background-color: var(--ts1-surface-muted);
}

html.dark[data-ts1-tema="scuro"] div.dtsr-confirmation button:hover,
html.dark[data-ts1-tema="scuro"] div.dtsr-creation button:hover {
    background-color: var(--ts1-surface-strong);
}

html.dark[data-ts1-tema="scuro"] div.dtsr-creation-form div.dtsr-form-row input.dtsr-name-input {
    border-color: var(--ts1-line) !important;
}

/* ==== FASE 5 - DASHBOARD CRM, VISTA TELEFONO ==============================================
   Le regole @media di css/dashboardCRM.css (fuori dalla Fase 4): gemelle nella stessa
   @media, con la condizione scritta identica. Restano i pallini di stato
   (.dashCRM-task-stato-N::after): il colore e' lo stato. */
@media (max-width: 768px) {
    html[data-ts1-tema="scuro"] .dashCRM-bucket-header {
        background: var(--ts1-surface-strong);
    }

    html[data-ts1-tema="scuro"] .dashCRM-bucket:has(.dashCRM-empty) {
        border-color: var(--ts1-line);
    }

    html[data-ts1-tema="scuro"] #modalTask .modal-footer {
        background: var(--ts1-surface-muted);
    }
}

/* ==== FASE 5 - COLORI IN LINEA RIMASTI ====================================================
   Il menu «Condividi» (documenti_dettaglio, interventi_dettaglio) e' azzurro con
   !important IN LINEA: nessun foglio lo batte. Lo style ora dice
   var(--ts1-menu-chiaro, #eef5fb): in chiaro vale il ripiego, qui la variabile. Vale
   --ts1-surface, lo stesso tono dell'ombra interna di #dropDownShare (Fase 1, piu' in
   alto) che si disegna sopra il fondo: e' quello che si vede comunque. */
html[data-ts1-tema="scuro"] {
    --ts1-menu-chiaro: var(--ts1-surface);
}

/* prodotti/rentri.aspx: il riquadro delle sezioni del modulo (la pagina dipinge solo il bordo). */
html[data-ts1-tema="scuro"] .form-section {
    border-color: var(--ts1-line);
}

/* ==== FASE 5 - AGENTHUB ====================================================================
   Gli stili in linea di js/AgentHub.js (modali di attivazione e piano) scrivono
   var(--ts1-agenthub-…, #colore di oggi): in chiaro vale il ripiego. La chat e la cornice
   seguono il tema del portale da js/AgentHub.js stesso (temaAgentHub). */
html[data-ts1-tema="scuro"] {
    --ts1-agenthub-blu: var(--ts1-brand-text);
    --ts1-agenthub-scelto-bg: var(--ts1-brand-soft);
    --ts1-agenthub-nota-bg: var(--ts1-surface-strong);
    --ts1-agenthub-nota-fg: var(--ts1-text);
    --ts1-agenthub-avviso-bg: var(--ts1-stato-attesa-bg);
    --ts1-agenthub-avviso-bordo: var(--ts1-stato-attesa-fg);
    --ts1-agenthub-avviso-fg: var(--ts1-stato-attesa-fg);
}

/* ==== FASE 5 - PAGINA DI ERRORE (MasterPageError.master, error.aspx) =====================
   La pagina ha il suo <style>: testo #464646, titolo blu notte #09426f. Il pulsante blu
   notte col testo bianco resta. Fondo e colore del testo di body li da' gia' la regola della
   pagina della Fase 1 (html[data-ts1-tema="scuro"] body), che batte il body della pagina per
   peso: qui resta solo il titolo. */
html[data-ts1-tema="scuro"] .error-heading {
    color: var(--ts1-brand-text);
}

/* ==== FASE 6 - UN RILEVATORE SOLO ==========================================================
   Col rilevatore comune (colori per nome compresi) al planner interventi sfuggiva il rosso
   dei festivi di css/tui-calendar.min.css: stesso tono della griglia (tui1(), festivo). */
html[data-ts1-tema="scuro"] .tui-full-calendar-holiday {
    color: var(--ts1-stato-stop-fg);
}

/* ==== FASE 6 - CKEDITOR 5 ==================================================================
   L'editor si tematizza con le sue variabili --ck-color-* (dichiarate su :root da
   js/ckeditor.js): html[data-ts1-tema="scuro"] e' piu' pesante di :root e vince anche se
   l'editor inietta i suoi stili dopo questo foglio. Le variabili che derivano da altre via
   var() seguono da sole; gli accenti restano (CK_TENUTE in tests/js/temi-web-fase6.test.js).
   Il TESTO scritto dall'utente con il colore del carattere resta del colore scelto. */
html[data-ts1-tema="scuro"] {
    --ck-color-base-background: var(--ts1-surface);
    --ck-color-base-foreground: var(--ts1-surface-muted);
    --ck-color-base-border: var(--ts1-line);
    --ck-color-base-text: var(--ts1-text);
    --ck-color-button-default-active-background: var(--ts1-surface-strong);
    --ck-color-button-default-active-shadow: var(--ts1-line);
    --ck-color-button-default-hover-background: var(--ts1-surface-strong);
    --ck-color-button-on-active-background: var(--ts1-surface-strong);
    --ck-color-button-on-active-shadow: var(--ts1-line);
    --ck-color-button-on-background: var(--ts1-surface-strong);
    --ck-color-button-on-disabled-background: var(--ts1-surface-muted);
    --ck-color-button-on-hover-background: var(--ts1-surface-strong);
    --ck-color-editable-blur-selection: var(--ts1-surface-strong);
    --ck-color-engine-placeholder-text: var(--ts1-text-soft);
    --ck-color-image-caption-background: var(--ts1-surface-muted);
    --ck-color-image-caption-text: var(--ts1-text);
    --ck-color-input-border: var(--ts1-line);
    --ck-color-input-disabled-background: var(--ts1-surface-muted);
    --ck-color-input-disabled-border: var(--ts1-line);
    --ck-color-input-disabled-text: var(--ts1-text-soft);
    --ck-color-link-default: var(--ts1-brand-text);
    --ck-color-media-embed-placeholder-url-text: var(--ts1-text-soft);
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.5);
    --ck-color-shadow-drop-active: rgba(0, 0, 0, 0.5);
    --ck-color-shadow-inner: rgba(0, 0, 0, 0.35);
    --ck-color-switch-button-inner-shadow: rgba(0, 0, 0, 0.35);
    --ck-color-split-button-hover-background: var(--ts1-surface-strong);
    --ck-color-split-button-hover-border: var(--ts1-line);
    --ck-color-switch-button-off-background: var(--ts1-line);
    --ck-color-switch-button-off-hover-background: var(--ts1-text-soft);
    --ck-color-table-caption-background: var(--ts1-surface-muted);
    --ck-color-table-caption-text: var(--ts1-text);
    --ck-color-widget-blurred-border: var(--ts1-line);
}

/* Gli sfondi degli evidenziatori (js/ckeditor.js, .marker-*) sono chiari e restano come scelti:
   il testo sopra eredita --ck-color-text (quasi bianco in scuro) e non si leggerebbe, quindi resta scuro.
   .pen-red e .pen-green colorano il testo su sfondo trasparente: non serve nulla. */
html[data-ts1-tema="scuro"] .ck-content .marker-yellow,
html[data-ts1-tema="scuro"] .ck-content .marker-green,
html[data-ts1-tema="scuro"] .ck-content .marker-pink,
html[data-ts1-tema="scuro"] .ck-content .marker-blue {
    color: #000;
}

/* ==== FASE 6 - ICONE SCURE =================================================================
   Misurate sulle immagini usate dal sito (luminosita' media dei pixel visibili): quelle
   grigio ardesia o blu notte si perdevano sul fondo scuro, e si schiariscono come
   refresh.png e print.png della Fase 3 (selettore per src: le nominano senza una classe
   comune). Le colorate (Excel, Word, PDF, la X rossa, warning) restano.
   Ricalibrata il 2026-10-12 come la Fase 3 (1.35 invece di 1.7); entra share.png (blu notte,
   il «Condividi» dei dettagli), esce print_b.png (vedi sotto). */
html[data-ts1-tema="scuro"] img[src$="images/set1/undo.png"],
html[data-ts1-tema="scuro"] img[src$="images/set1/back-document.png"],
html[data-ts1-tema="scuro"] img[src$="images/set1/sort.png"],
html[data-ts1-tema="scuro"] img[src$="images/user.png"],
html[data-ts1-tema="scuro"] img[src$="images/filter.png"],
html[data-ts1-tema="scuro"] img[src$="images/filterRemove.png"],
html[data-ts1-tema="scuro"] img[src$="images/GeoFlagNO.png"],
html[data-ts1-tema="scuro"] img[src$="images/share.png"] {
    filter: brightness(1.35);
}

/* print_b.png ha la barra in alto NERA: schiarita restava un blocco bianco senza la barra.
   L'inversione morbida (hue-rotate riporta le tinte) da' corpo grigio chiaro e foglio scuro. */
html[data-ts1-tema="scuro"] img[src$="images/set1/print_b.png"] {
    filter: invert(.8) hue-rotate(180deg);
}

/* chkNO.jpg (colonna «Impianto Attivo», js/app.js) e' un quadrato bianco pieno: sul fondo
   scuro abbagliava. Grigio chiaro, si legge ancora come casella vuota. */
html[data-ts1-tema="scuro"] img[src$="images/chkNO.jpg"] {
    filter: brightness(.75);
}

/* Le icone di vista e le frecce del planner sono glifi NERI: schiarire il nero non serve, si inverte.
   Le icone di vista sono sfondi (css/style.css, .ic_view_*), invertiti per classe; le frecce sono il
   src di input type=image / img (vedi sotto). Le regole .ic-arrow-line-* restano, ma nessun elemento le usa. */
html[data-ts1-tema="scuro"] .ic_view_month,
html[data-ts1-tema="scuro"] .ic_view_week,
html[data-ts1-tema="scuro"] .ic_view_day,
html[data-ts1-tema="scuro"] .ic-arrow-line-left,
html[data-ts1-tema="scuro"] .ic-arrow-line-right {
    filter: invert(1);
}

/* Le frecce reali del planner e del registro presenze sono il src di input type=image / img, non sfondi. */
html[data-ts1-tema="scuro"] [src*="images/planner/ic-arrow-line"] {
    filter: invert(1);
}

/* ==== FASE 6 - LOGO DI TETRA AI ==============================================================
   Come il logo TetraSystem: una variante d'immagine (scritta TETRA chiara) al posto di un
   riquadro. In chiaro .ts-logo-variante resta nascosta (css/style.css). */
html[data-ts1-tema="scuro"] .ts-ai-logo:not(.ts-logo-variante) {
    display: none;
}

html[data-ts1-tema="scuro"] .ts-ai-logo.ts-logo-scuro {
    display: inline-block;
}

/* Il pulsante non imposta alcuno sfondo: in scuro apparirebbe il grigio ButtonFace del browser. */
html[data-ts1-tema="scuro"] #agenthub-toggle {
    background: transparent;
}

/* ==== FASE 6 - PAGINE FUORI DALLA MASTERPAGE ===============================================
   ConfigEmail.html (finestra «Gestisci Email») e not-found.html (403/404) hanno un <style>
   proprio con nomi generici: le gemelle stanno sotto la classe del loro <body>, per non
   vestire per sbaglio il portale. mobileBrowsing.html e loginGoogle.html usano gia'
   css/style.css: basta il tema. */

/* ConfigEmail.html */
html[data-ts1-tema="scuro"] body.ts1-pagina-configemail {
    background-color: var(--ts1-page-bg);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .container {
    background: var(--ts1-surface);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail h2 {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .subtitle {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .btn {
    border: 1px solid var(--ts1-line);
    color: var(--ts1-text);
    background: var(--ts1-surface-strong);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .section-title {
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .section-description {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .divider {
    background: linear-gradient(90deg, transparent, var(--ts1-line) 50%, transparent);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .admin-consent {
    color: var(--ts1-text-soft);
}

/* Il bordo blu/azzurro del provider resta (accento d'identita'): va ridichiarato, perche' il bordo
   di .btn qui sopra (specificita' piu' alta) vincerebbe sul :hover della pagina. Cambia anche il fondo. */
html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .btn.google:hover,
html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .btn.microsoft:hover {
    background: var(--ts1-brand-soft);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .btn.google:hover {
    border-color: #1a73e8;
}

html[data-ts1-tema="scuro"] body.ts1-pagina-configemail .btn.microsoft:hover {
    border-color: #0078d4;
}

/* not-found.html: il suo body e' transparent, quindi Bootstrap scuro non basta a scurire il fondo. */
html[data-ts1-tema="scuro"] body.ts1-pagina-notfound {
    background-color: var(--ts1-page-bg);
}

html[data-ts1-tema="scuro"] body.ts1-pagina-notfound p {
    color: var(--ts1-text);
}

/* Logo TetraSystem: blu notte su fondo scuro non si legge. Stessa coppia originale/variante
   della navbar (.ts-logo-variante), ma sotto la classe del <body> di ciascuna pagina, per non
   toccare #loginModal #TsLogoWelcome del portale. Pagine: not-found.html, mobilebrowsing,
   portalredirect.html. Li' si punta al src del logo TetraSystem perche' la pagina ha anche il
   logo del cliente, anch'esso img-fluid, che deve restare visibile. */
html[data-ts1-tema="scuro"] body.ts1-pagina-notfound img.img-fluid:not(.ts-logo-variante),
html[data-ts1-tema="scuro"] body.ts1-pagina-portalredirect img[src="images/welcome1.png"],
html[data-ts1-tema="scuro"] body.ts1-pagina-mobilebrowsing #TsLogoWelcome:not(.ts-logo-variante) {
    display: none;
}

html[data-ts1-tema="scuro"] body.ts1-pagina-notfound .ts-logo-scuro,
html[data-ts1-tema="scuro"] body.ts1-pagina-portalredirect .ts-logo-scuro,
html[data-ts1-tema="scuro"] body.ts1-pagina-mobilebrowsing .ts-logo-scuro {
    display: inline-block;
}

/* ==== FASE 6 - MODALE DI SCANSIONE =========================================================
   js/app.js (ScanModal, #scannedDivCT) scrive il testo nero in linea: ora
   var(--ts1-testo-scuro, black), in chiaro vale il ripiego. */
html[data-ts1-tema="scuro"] {
    --ts1-testo-scuro: var(--ts1-text);
}

/* ==== FASE 7 - COLORI NELLE PAGINE E NEL JS ==================================================
   Le Fasi 4-6 hanno coperto i FOGLI; qui i blocchi <style> delle pagine e i colori scritti
   in linea dal JS (tests/js/temi-web-fase7.test.js). */

/* Il popup degli appuntamenti del planner interventi (<style> di interventi/planner.aspx):
   bianco col bordo grigio, e il testo quasi bianco ereditato dal tema non si leggeva. */
html[data-ts1-tema="scuro"] #popupCal {
    background-color: var(--ts1-surface-strong);
    border: 1px solid var(--ts1-line);
    color: var(--ts1-text);
}

/* Il banner «Filtri Applicati» sopra gli elenchi DataTables (js/app.js #alertfiltri,
   js/ts-datatable-cm.js .js-dt-client-filterbar). Lo style in linea `#cfe9ff66;!important`
   ha l'!important dopo il `;`, quindi non vale: questa regola lo batte. In scuro era una
   macchia azzurro-lattiginosa sopra ogni elenco filtrato. */
html[data-ts1-tema="scuro"] #alertfiltri,
html[data-ts1-tema="scuro"] .js-dt-client-filterbar .alert {
    background-color: var(--ts1-brand-soft) !important;
    border-color: var(--ts1-line) !important;
    color: var(--ts1-text) !important;
}

/* Badge `bg-light text-dark` (js/dashboardCRM.js «Conversato», js/AgentHub.js «1 di 2»):
   il fondo lo scurisce la gemella di .bg-light, ma .text-dark resta rgb(33,37,41) !important
   (Bootstrap) e la nostra gemella di .text-dark esclude [class*="bg-"]. (0,3,1) batte (0,1,0). */
html[data-ts1-tema="scuro"] .bg-light.text-dark {
    color: var(--ts1-text) !important;
}

/* Righe evidenziate `table-warning` (documenti/listini_dettaglio.aspx, da JS;
   _manutenzione/verificalicenze.aspx): Bootstrap 5.3 non ha la variante scura dei colori
   di tabella e le lascia #fff3cd col testo nero. Restano un'evidenza, col velo di attesa. */
html[data-ts1-tema="scuro"] .table-warning {
    --bs-table-color: var(--ts1-text);
    --bs-table-bg: var(--ts1-stato-attesa-bg);
    --bs-table-border-color: var(--ts1-line);
    --bs-table-striped-bg: var(--ts1-stato-attesa-bg);
    --bs-table-striped-color: var(--ts1-text);
    --bs-table-active-bg: var(--ts1-stato-attesa-bg);
    --bs-table-active-color: var(--ts1-text);
    --bs-table-hover-bg: var(--ts1-stato-attesa-bg);
    --bs-table-hover-color: var(--ts1-text);
    color: var(--ts1-text);
    border-color: var(--ts1-line);
}

/* Il popup della mappa interventi (interventi/mappaInterventi.aspx, Leaflet 1.7.1 da CDN,
   foglio fuori dal repo: selettori presi dalla 1.7.1, il banco controlla la versione).
   Era bianco, e la regola scura dei link (a:not(.btn):not(.nav-link)) batte
   .leaflet-container a: i link Cliente/Intervento/Indirizzo finivano azzurro chiaro su
   bianco. Zoom e attribuzione restano bianchi: stanno sulle mattonelle chiare della mappa. */
html[data-ts1-tema="scuro"] .leaflet-popup-content-wrapper,
html[data-ts1-tema="scuro"] .leaflet-popup-tip {
    background: var(--ts1-surface-strong);
    color: var(--ts1-text);
}

html[data-ts1-tema="scuro"] .leaflet-container a.leaflet-popup-close-button {
    color: var(--ts1-text-soft);
}

html[data-ts1-tema="scuro"] .leaflet-popup-content a {
    color: var(--ts1-brand-text);
}

/* Zoom e attribuzione restano bianchi (sopra), ma sono <a>: la regola scura dei link,
   piu' pesante, faceva «+», «−» e «Leaflet» azzurro chiaro su bianco. Si rimettono i colori
   della 1.7.1 (.leaflet-bar a nero, disattivato #bbb; .leaflet-container a #0078A8). */
html[data-ts1-tema="scuro"] .leaflet-bar a {
    color: #000 !important;
}

html[data-ts1-tema="scuro"] .leaflet-bar a.leaflet-disabled {
    color: #bbb !important;
}

html[data-ts1-tema="scuro"] .leaflet-control-attribution a {
    color: #0078A8 !important;
}

/* Il colore che l'utente sceglie nel DB (RTF_Colore) come fondo del nome del contratto
   (interventi/contratti_elenco.aspx): resta com'e', e quasi sempre e' bianco. Il testo torna
   quello del chiaro, che su quei fondi si legge; in scuro sarebbe chiaro su bianco. */
html[data-ts1-tema="scuro"] .ts-colore-utente {
    color: #212529;
}

/* Tooltip di Bootstrap (i [title] del sito, js/app.js): il testo e' var(--bs-body-bg), che in
   scuro e' quasi nero, sul fondo #205d86 di style.css. Si tiene il bianco del chiaro. */
html[data-ts1-tema="scuro"] .tooltip {
    --bs-tooltip-color: #fff;
}

/* Il campo di scansione dei documenti (documenti/documenti_generazione.aspx, #CodiceSC):
   il JS lo colora in linea con var(--ts1-scan-*, #colore-di-oggi). In scuro il testo del
   campo e' quasi bianco (regola dei campi), quindi i fondi diventano veli della stessa tinta. */
html[data-ts1-tema="scuro"] {
    --ts1-scan-errore: var(--ts1-stato-stop-forte);
    --ts1-scan-ok: var(--ts1-stato-ok-bg);
    --ts1-scan-attesa: var(--ts1-brand-soft);
}

/* AgentHub, schede dei piani non selezionate (js/AgentHub.js): bordo grigio chiaro in linea,
   ora var(--ts1-agenthub-bordo, #dee2e6). */
html[data-ts1-tema="scuro"] {
    --ts1-agenthub-bordo: var(--ts1-line);
}