/*
 * darkmode.css
 * Override attivi SOLO con html[data-theme="dark"] (toggle nel menu header).
 * Copre i componenti legacy con colori hardcoded (theme.css, admin-forms.css,
 * dataTables, ngDialog, stili inline) che i token di claude.css non raggiungono.
 * In light mode questo file non ha alcun effetto.
 */

/* ============================================================
   1. ELEMENTI BASE — input, select, testo di default
   ============================================================ */

/* Campi di input: theme.css li definisce bianchi con testo nero */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control {
    color: var(--text-body);
    background-color: var(--surface-0);
    border-color: var(--border-color);
}

html[data-theme="dark"] ::placeholder {
    color: var(--text-faint);
    opacity: 1;
}

/* Autofill di Chrome/Edge: senza questo i campi precompilati restano
   con l'overlay chiaro azzurrino del browser */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--surface-0) inset;
    box-shadow: 0 0 0 1000px var(--surface-0) inset;
    -webkit-text-fill-color: var(--text-body);
    caret-color: var(--text-body);
}

/* Testi di default che theme.css/bootstrap fissano su grigi scuri.
   :where() tiene bassa la specificità: qualsiasi regola con classe
   (colori semantici, stati) continua a vincere.
   I componenti sinottici SCADA (attributo component="...") sono esclusi:
   lì i colori dei testi sono semantici di stato impianto. */
html[data-theme="dark"] :where(label, legend, output, .help-block, .form-control-static):where(:not([component]):not([component] *)) {
    color: var(--text-body);
}

html[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Righe valore stock (claude.css: background #ccc hardcoded) */
html[data-theme="dark"] .stk-val {
    background-color: var(--surface-3);
}

/* Icona di chiusura dialoghi: nera con ombra bianca in light */
html[data-theme="dark"] .close {
    color: #fff;
    text-shadow: none;
}

/* ============================================================
   2. TABELLE — striping e dataTables
   (righe alternate hardcoded #fff / #f9f9f9 in theme.css)
   ============================================================ */

html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-child(odd) > th {
    background-color: var(--surface-2);
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--hover-bg);
}

html[data-theme="dark"] table.dataTable tr.odd {
    background-color: var(--surface-2);
}

html[data-theme="dark"] table.dataTable tr.even {
    background-color: transparent;
}

html[data-theme="dark"] table.dataTable thead th {
    background-color: var(--surface-2);
}

html[data-theme="dark"] table.dataTable tfoot th {
    background: var(--surface-2);
    border-top-color: var(--border-color);
}

/* Testi delle toolbar dataTables (length/filter/info/paginate) */
html[data-theme="dark"] div.dataTables_length label,
html[data-theme="dark"] div.dataTables_filter label,
html[data-theme="dark"] div.dataTables_info {
    color: var(--text-body);
}

/* ============================================================
   3. COMPONENTI BOOTSTRAP — bottoni, dropdown, modali, tab, paging
   ============================================================ */

/* NB: molti bottoni "toggle" (es. header dei grafici curve) hanno
   btn-default fisso + una classe di stato (btn-warning/success/danger/
   primary/info o .active) aggiunta via ng-class quando sono premuti.
   Questo override è più specifico delle regole bootstrap di stato,
   quindi deve ritrarsi quando lo stato è attivo, altrimenti il
   bottone premuto è indistinguibile. */
html[data-theme="dark"] .btn-default:not(.btn-warning):not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-info):not(.active) {
    color: var(--text-body);
    background-color: var(--surface-3);
    border-color: var(--border-strong);
}

    html[data-theme="dark"] .btn-default:not(.btn-warning):not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-info):not(.active):hover,
    html[data-theme="dark"] .btn-default:not(.btn-warning):not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-info):not(.active):focus,
    html[data-theme="dark"] .btn-default:not(.btn-warning):not(.btn-success):not(.btn-danger):not(.btn-primary):not(.btn-info):not(.active):active {
        color: var(--text-strong);
        background-color: var(--border-strong);
        border-color: var(--border-strong);
    }

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface-0);
    border-color: var(--border-color);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

    html[data-theme="dark"] .dropdown-menu > li > a {
        color: var(--text-body);
    }

        html[data-theme="dark"] .dropdown-menu > li > a:hover,
        html[data-theme="dark"] .dropdown-menu > li > a:focus {
            color: var(--text-strong);
            background-color: var(--hover-bg);
        }

    html[data-theme="dark"] .dropdown-menu .divider {
        background-color: var(--border-color);
    }

/* Widget allarmi / switchboard / gruppi viste (widgets.css):
   sfondi #fafafa, bordi #e2e2e2 e testi neri hardcoded.
   I display Compumat (verde su bianco) restano volutamente chiari. */
html[data-theme="dark"] .alarmWidget-panel-menu {
    background-color: var(--surface-1);
    border-color: var(--border-color);
}

html[data-theme="dark"] .alarmWidget-panel-body {
    border-color: var(--border-color);
}

html[data-theme="dark"] .alarmWidget-panel-body-timeline-desc-info {
    color: var(--text-body);
}

html[data-theme="dark"] .switchWidget_body {
    border-color: var(--border-color);
}

html[data-theme="dark"] .switchWidget_body_item_desc {
    color: var(--text-body);
}

html[data-theme="dark"] .viewGroupWidget_list_header {
    color: var(--text-body);
}

/* Card dei sili (caricamento cemento, scadaCementLoading): lo sfondo
   lightgray è inline sui tag delle direttive, serve !important.
   Il pannello legenda chiaro con testo nero dentro la card è
   volutamente fisso (autocontenuto, leggibile in entrambi i temi). */
html[data-theme="dark"] .silo-card {
    background: var(--surface-1) !important;
    border: 3px solid var(--border-color) !important;
}

/* Area grafica interna del silo (components.css: lightgray hardcoded) */
html[data-theme="dark"] .siloContainer {
    background-color: var(--surface-2);
}

    /* Piste delle barre di livello Real/Calc: il bianco pieno del track
       bootstrap spara troppo sul fondo scuro */
    html[data-theme="dark"] .siloContainer .progress {
        background-color: rgba(255, 255, 255, 0.14);
    }

html[data-theme="dark"] .modal-content {
    background-color: var(--surface-0);
    color: var(--text-body);
    border-color: var(--border-color);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--border-color);
}

html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

    html[data-theme="dark"] .nav-tabs > li > a:hover {
        background-color: var(--hover-bg);
        border-color: var(--border-color);
    }

    html[data-theme="dark"] .nav-tabs > li.active > a,
    html[data-theme="dark"] .nav-tabs > li.active > a:hover,
    html[data-theme="dark"] .nav-tabs > li.active > a:focus {
        color: var(--text-strong);
        background-color: var(--surface-0);
        border-color: var(--border-color);
        border-bottom-color: transparent;
    }

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    color: var(--accent-text);
    background-color: var(--surface-0);
    border-color: var(--border-color);
}

    html[data-theme="dark"] .pagination > li > a:hover,
    html[data-theme="dark"] .pagination > li > span:hover {
        background-color: var(--hover-bg);
        border-color: var(--border-color);
        color: var(--accent-text-strong);
    }

html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span {
    color: var(--text-faint);
    background-color: var(--surface-1);
    border-color: var(--border-color);
}

html[data-theme="dark"] .input-group-addon {
    color: var(--text-body);
    background-color: var(--surface-1);
    border-color: var(--border-color);
}

/* ============================================================
   4. ADMIN FORMS (dist/style/admin-forms.css — testo #626262, campi bianchi)
   ============================================================ */

html[data-theme="dark"] .admin-form,
html[data-theme="dark"] .admin-form label,
html[data-theme="dark"] .admin-form input,
html[data-theme="dark"] .admin-form select,
html[data-theme="dark"] .admin-form textarea,
html[data-theme="dark"] .admin-form button {
    color: var(--text-body);
}

html[data-theme="dark"] .admin-form .gui-input,
html[data-theme="dark"] .admin-form .gui-textarea,
html[data-theme="dark"] .admin-form .select > select,
html[data-theme="dark"] .admin-form .select-multiple select {
    background-color: var(--surface-0);
    border-color: var(--border-color);
    color: var(--text-body);
}

/* Card admin-form (usata dal login): pannello bianco, footer #f2f2f2 */
html[data-theme="dark"] .admin-form .panel {
    background-color: var(--surface-1);
    border-color: var(--border-color);
}

html[data-theme="dark"] .admin-form .panel-footer {
    background: var(--surface-1);
    border-top-color: var(--border-color);
}

/* Bottone generico admin-form (grigio chiaro con testo scuro) */
html[data-theme="dark"] .admin-form .button {
    background: var(--surface-3);
    color: var(--text-body);
    text-shadow: none;
}

/* .bg-light (#FAFAFA) e le sue varianti di testo: usato dal body
   del login e da altri pannelli chiari */
html[data-theme="dark"] .bg-light {
    background-color: var(--surface-1);
    color: var(--text-body);
}

    html[data-theme="dark"] .bg-light .text-muted {
        color: var(--text-muted);
    }

    html[data-theme="dark"] .bg-light .text-darken {
        color: var(--text-strong);
    }

/* Logo MCT (blu scuro su trasparente): schiarito per restare leggibile */
html[data-theme="dark"] img[src*="logoMCT"] {
    filter: brightness(1.7);
}

/* Loader GIF (impianto animato su fondo chiaro #f5f5f5, colore cotto
   nei frame): invert ~0.85 porta lo sfondo a ~#2d2d2d (≈ --surface-0)
   e schiarisce l'impianto; hue-rotate(180deg) ripristina la tonalità
   dei pezzi blu dopo l'inversione. Gli angoli arrotondati mascherano
   il piccolo scarto residuo di tono col fondo del dialogo. */
html[data-theme="dark"] img[src*="loader.gif"] {
    filter: invert(0.85) hue-rotate(180deg);
    border-radius: 10px;
}

/* Truck widget: la betoniera è una silhouette nera su trasparente —
   invertita diventa chiara e leggibile sulla card scura. Palo e
   cornice del semaforo (neri) alzati a grigio. */
html[data-theme="dark"] .truck_img_style {
    filter: invert(0.82);
}

html[data-theme="dark"] .truck_semaforo_palo {
    border-left-color: var(--text-faint);
}

html[data-theme="dark"] .truck_semaforo_luci {
    border-color: var(--border-strong);
}

/* ============================================================
   5. NGDIALOG — tema default
   ============================================================ */

html[data-theme="dark"] .ngdialog.ngdialog-theme-default .ngdialog-content {
    background: var(--surface-0);
    color: var(--text-body);
}

/* ============================================================
   6. STILI INLINE — style="background-color:white/whitesmoke/#fff"
   Non intercettabili dai token: servono gli attribute selector con
   !important per battere lo stile inline. Il testo non viene toccato:
   quello ereditato è già chiaro, quello esplicito inline resta com'è.
   NB: [style*="background-color:white"] copre anche "whitesmoke"
   (match per sottostringa).
   ============================================================ */

/* NB: tutti gli hack inline escludono:
   - i componenti sinottici SCADA (attributo component="..." sul div radice
     delle direttive newDosingGroup, newSkip, newMixer, ecc.): lì bianchi e
     neri sono colori di stato;
   - i nodi del flowchart del configuratore (.fc-node): lo sfondo del nodo
     è il colore del componente (chiaro in entrambi i temi), il testo deve
     restare scuro. */
html[data-theme="dark"] [style*="background-color:white"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="background-color: white"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="background:white"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="background: white"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="background-color:#fff"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="background-color: #fff"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="background:#fff"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="background: #fff"]:where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)) {
    background-color: var(--surface-0) !important;
}

/* Testo nero inline SENZA sfondo proprio: su superficie scura sarebbe
   illeggibile. Chi ha un background inline (spie, badge colorati) è
   escluso e mantiene il suo contrasto originale. */
html[data-theme="dark"] [style*="color:black"]:not([style*="background"]):where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="color: black"]:not([style*="background"]):where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="color:#000"]:not([style*="background"]):where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="color: #000"]:not([style*="background"]):where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="color:#333"]:not([style*="background"]):where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)),
html[data-theme="dark"] [style*="color: #333"]:not([style*="background"]):where(:not([component]):not([component] *):not(.fc-node):not(.fc-node *)) {
    color: var(--text-body) !important;
}

/* ============================================================
   7. CONFIGURATORE — dialoghi ngDialog (parametri componente, ecc.)
   I temi configurator hanno background #f0f0f0 e testo #3b3f4f
   hardcoded: in dark il pannello restava chiaro mentre striping
   e input diventavano scuri.
   ============================================================ */

html[data-theme="dark"] .ngdialog.ngdialog-theme-configurator .ngdialog-content,
html[data-theme="dark"] .ngdialog.ngdialog-theme-configurator-parameters .ngdialog-content,
html[data-theme="dark"] .ngdialog.ngdialog-theme-configurator-chart .ngdialog-content {
    background: var(--surface-1);
    color: var(--text-body);
}

/* Input interni ai dialoghi (regole .ngdialog-input più specifiche del
   nostro override generico sugli input) */
html[data-theme="dark"] .ngdialog .ngdialog-input input[type=text],
html[data-theme="dark"] .ngdialog .ngdialog-input input[type=email],
html[data-theme="dark"] .ngdialog .ngdialog-input input[type=password],
html[data-theme="dark"] .ngdialog .ngdialog-input input[type=url],
html[data-theme="dark"] .ngdialog .ngdialog-input textarea {
    background: var(--surface-0);
    color: var(--text-body);
}

/* Bottone secondario dei dialoghi (#e0e0e0 con testo #777) */
html[data-theme="dark"] .ngdialog .ngdialog-button.ngdialog-button-secondary {
    background: var(--surface-3);
    color: var(--text-body);
}

/* Campi obbligatori evidenziati in giallo via ng-style: il testo degli
   input in dark è chiaro e sul giallo sparirebbe */
html[data-theme="dark"] input[style*="background-color: yellow"],
html[data-theme="dark"] input[style*="background-color:yellow"] {
    color: #1a1c22 !important;
}

/* ============================================================
   8. DAILY PRODUCTION PLAN / CICLI (productionList, productionCycle)
   ============================================================ */

/* Righe alternate: in light è un velo bianco 40% su #f5f5f5 */
html[data-theme="dark"] .productionList_body {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Celle della lista produzioni/cicli: il colore ereditato dal
   contenitore è scuro e in dark il testo sparisce. La regola diretta
   sulla cella vince su qualunque ereditarietà; link e label interni
   mantengono i loro colori (hanno regole proprie). */
html[data-theme="dark"] .productionCycle_body_list_item,
html[data-theme="dark"] .productionList_body_list_item {
    color: var(--text-body);
}

html[data-theme="dark"] .border_total {
    border-color: var(--border-strong);
}

/* ============================================================
   8b. RECIPE EDITOR — stato "modifiche non salvate"
   In light la pagina si tinge di ambra chiaro (#ffe3c2/#fffbeb):
   in dark diventa ambra scuro, il badge e il pallino pulsante
   (#f0b400) restano invariati perché leggibili su entrambi.
   ============================================================ */

html[data-theme="dark"] .recipe-edit-page.re-is-dirty {
    background: #2e2410;
}

html[data-theme="dark"] .recipe-edit-page.re-is-dirty .re-tabs,
html[data-theme="dark"] .recipe-edit-page.re-is-dirty .re-tabs li.active .re-tab-btn {
    background: var(--warning-soft);
}

/* ============================================================
   9. HIGHCHARTS (v8, in vendor_2.min.js)
   I grafici sono SVG con colori impostati come attributi (fill/stroke,
   che il CSS sovrascrive) o stili inline sui testi (serve !important).
   Nessun redraw necessario: reagiscono al toggle del tema.
   I colori delle SERIE non vengono toccati.
   ============================================================ */

/* Sfondo del grafico */
html[data-theme="dark"] .highcharts-background {
    fill: var(--surface-0);
}

html[data-theme="dark"] .highcharts-plot-background,
html[data-theme="dark"] .highcharts-plot-border {
    fill: transparent;
}

/* Testi: titolo, sottotitolo, titoli e etichette assi, legenda */
html[data-theme="dark"] .highcharts-title,
html[data-theme="dark"] .highcharts-subtitle,
html[data-theme="dark"] .highcharts-axis-title,
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-legend-item text {
    fill: var(--text-body) !important;
    color: var(--text-body) !important;
}

    html[data-theme="dark"] .highcharts-legend-item:hover text {
        fill: var(--text-strong) !important;
    }

/* Serie disattivata dalla legenda: resta smorzata */
html[data-theme="dark"] .highcharts-legend-item-hidden text {
    fill: var(--text-faint) !important;
}

/* Griglia e assi */
html[data-theme="dark"] .highcharts-grid-line {
    stroke: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .highcharts-axis-line,
html[data-theme="dark"] .highcharts-tick {
    stroke: var(--border-color);
}

/* Tooltip */
html[data-theme="dark"] .highcharts-tooltip-box {
    fill: var(--surface-1);
    stroke: var(--border-color);
}

html[data-theme="dark"] .highcharts-tooltip text {
    fill: var(--text-strong) !important;
}

/* Tooltip con useHTML:true (es. dataView): il contenuto è HTML, non
   SVG text. Si ricolora solo il wrapper esterno (che ha color:#333
   inline): gli span interni con colore proprio — i pallini delle
   serie — vincono comunque perché hanno lo stile inline. */
html[data-theme="dark"] div.highcharts-tooltip,
html[data-theme="dark"] .highcharts-tooltip > span {
    color: var(--text-strong) !important;
}

/* Tabella dati "View data" del menu export */
html[data-theme="dark"] .highcharts-data-table table {
    background: var(--surface-0);
    color: var(--text-body);
}

html[data-theme="dark"] .highcharts-data-table th,
html[data-theme="dark"] .highcharts-data-table td {
    border-color: var(--border-color);
}

/* Bottone hamburger export (in alto a destra) */
html[data-theme="dark"] .highcharts-contextbutton .highcharts-button-box {
    fill: var(--surface-0);
}

html[data-theme="dark"] .highcharts-contextbutton path {
    stroke: var(--text-muted);
    fill: var(--text-muted);
}

/* Menu export: è un div HTML con stili inline */
html[data-theme="dark"] .highcharts-menu {
    background: var(--surface-0) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .highcharts-menu-item {
    color: var(--text-body) !important;
}

/* ============================================================
   Card vagonetto (fly-bucket-card) — testo mono-colore
   La card ha il fondo pieno per stato impianto (bucket.color da DB: rosso, verde,
   ciano) e i suoi testi arrivano da sorgenti diverse: alcuni con color inline, altri
   ereditato, altri lasciati al grigio di bootstrap. Su quei fondi saturi il grigio
   non si legge. Qui vale una regola sola: nero in light, bianco in dark.
   Ambito ristretto al tag della direttiva, cosi' le card sorelle non sono toccate.
   !important perche' diversi testi della card portano un color inline. */
fly-bucket-card,
fly-bucket-card :where(label, div, span, i, b, strong, small, td, th, a) {
    color: #000 !important;
}

html[data-theme="dark"] fly-bucket-card,
html[data-theme="dark"] fly-bucket-card :where(label, div, span, i, b, strong, small, td, th, a) {
    color: #fff !important;
}

/* I riquadri valore (S. Code, Tag #) hanno background-color:white fisso in
   components.css: nel dark li scurisco, altrimenti il testo bianco della card
   finirebbe su fondo bianco. In light restano bianchi col testo nero. */
html[data-theme="dark"] fly-bucket-card .flyBucket_distribution_data_table_Col_LR_data {
    background-color: #1f1f1f;
}

/* I pulsanti dentro la card hanno fondo proprio (Auto/MAN/Reset, btn-primary...):
   il loro testo segue il bottone, non la card. */
fly-bucket-card .btn:where(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info),
html[data-theme="dark"] fly-bucket-card .btn:where(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info) {
    color: #fff !important;
}