/* ============================================================
   Macchine AI e Macchine ospitate (js/modules/macchine.js) — portate da DEM il 09/10/2026.
   Tutto sotto .mc-pagina: niente esce dalla pagina. Riusa .card, .tabella, .badge, .btn, .avviso del tema;
   qui solo quello che manca. Le variabili --mc-* sono quelle --t-* del cruscotto di DEM rimappate sul tema chiaro
   del pannello (app.css). Colori dei grafici scelti per stare sopra 3:1 sul bianco.
   ============================================================ */
.mc-pagina {
  --mc-pannello: var(--superficie);
  --mc-morbido:  #fafafa;
  --mc-bordo:    var(--bordo);
  --mc-bordo-2:  var(--griglia);
  --mc-testo:    var(--testo);
  --mc-dim:      var(--testo-2);
  --mc-dim-2:    var(--testo-3);
  --mc-ok:       var(--ok);
  --mc-warn:     #e0a21e;          /* riempimenti (barre, bordi); il testo d'avviso usa --attenzione */
  --mc-err:      var(--errore);
  --mc-accento:  var(--accento);
  --mc-potenza:  #c4620a;          /* linea della potenza (sistema, schede, quadro) */
  --mc-serie-1:  #7448FF;          /* token in ingresso · token/s di SGLang */
  --mc-serie-2:  #c27c00;          /* token in uscita */
  color: var(--mc-testo);
  font-variant-numeric: tabular-nums;
}
.mc-pagina [hidden] { display: none !important; }
.mc-pagina code { background: var(--mc-morbido); border: 1px solid var(--mc-bordo-2); padding: 0 5px; border-radius: 4px; font-size: .92em; }

/* ---------- barra in testa: linguette delle macchine, stato dell'agente, rinfresco ---------- */
.mc-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.mc-barra .spazio { flex: 1; }
.mc-linguette { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mc-linguette button {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--mc-bordo); background: var(--mc-pannello); color: var(--mc-testo);
  padding: 5px 11px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600;
}
.mc-linguette button:hover { background: var(--mc-morbido); }
.mc-linguette button.attiva { background: var(--mc-accento); border-color: var(--mc-accento); color: #fff; }
.mc-gruppo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .35px; color: var(--mc-dim); padding: 0 4px 0 10px; margin-left: 6px; border-left: 1px solid var(--mc-bordo); white-space: nowrap; }
.mc-gruppo:first-child { border-left: 0; padding-left: 0; margin-left: 0; }
.mc-punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.mc-punto.ok { background: var(--mc-ok); box-shadow: 0 0 0 3px rgba(14, 138, 76, .16); }
.mc-punto.ko { background: var(--mc-err); box-shadow: 0 0 0 3px rgba(194, 47, 69, .16); }
.mc-linguette button.attiva .mc-punto { box-shadow: 0 0 0 2px #fff; }
.mc-letto { font-size: 12px; color: var(--mc-dim); }
.mc-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mc-dim); cursor: pointer; }
.mc-auto input { margin: 0; }

/* nota neutra (sola lettura, spiegazioni): bianca con il bordo del marchio; gli allarmi usano .avviso */
.mc-nota {
  background: var(--mc-pannello); border: 1px solid var(--mc-bordo); border-left: 3px solid var(--mc-accento);
  border-radius: var(--raggio); padding: 10px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.55;
}
.mc-pagina .avviso code { background: rgba(255, 255, 255, .6); border-color: transparent; }

/* ---------- riquadri ---------- */
.mc-card { margin-bottom: 16px; }
.mc-pagina .card-testata { flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px; }
.mc-pagina .card-testata h2 { font-size: 14.5px; letter-spacing: .8px; }
.mc-pagina .card-corpo { padding: 14px 16px; }
.mc-conta { font-size: 12px; color: var(--mc-dim); }
.mc-ctrl { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; }
.mc-ctrl select { width: auto; padding: 4px 8px; font-size: 12.5px; }
.mc-ctrl input[type="text"] { width: 240px; max-width: 60vw; padding: 4px 8px; font-size: 12.5px; }
.mc-ctrl label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--mc-dim); }
.mc-ctrl label input { margin: 0; }
.mc-vuoto { color: var(--mc-dim); padding: 18px 16px; text-align: center; font-size: 13px; }
.mc-pad-sotto { padding-top: 0 !important; }
.mc-sopra { margin-top: 10px; }
.mc-scroll { max-height: 460px; overflow: auto; }
.mc-scroll .tabella th { position: sticky; top: 0; z-index: 1; }

/* tabelle dense del monitoraggio (tante righe, numeri allineati) */
.mc-pagina table.tabella.mc-densa { font-size: 12.5px; }
.mc-pagina table.tabella.mc-densa th { padding: 7px 10px; font-size: 11px; letter-spacing: 1px; }
.mc-pagina table.tabella.mc-densa td { padding: 6px 10px; }
.mc-pagina table.tabella.mc-densa tr:last-child td { border-bottom: none; }

.mc-due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mc-due-piatto > div { min-width: 0; }
@media (max-width: 1000px) { .mc-due { grid-template-columns: minmax(0, 1fr); gap: 0; } .mc-due-piatto { gap: 14px; } }

/* testi di contorno (stessi nomi di DEM) */
.mc-pagina .mp-note { font-size: 12px; color: var(--mc-dim); line-height: 1.5; }
.mc-pagina .mp-dim { color: var(--mc-dim); }
.mc-pagina .mp-nome { color: var(--mc-dim); font-size: 11px; line-height: 1.3; margin-top: 1px; }
.mc-tariffa { display: inline-block; margin-top: 4px; font-size: .92em; color: var(--mc-dim); }
.mc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.mc-err { color: var(--mc-err); font-weight: 700; }
.mc-warn { color: var(--attenzione); font-weight: 700; }
.mc-spento td { opacity: .55; }
.mc-nowrap { white-space: nowrap; }
.mc-motivo { font-size: .92em; color: var(--mc-dim); min-width: 280px; }

/* ---------- testata della macchina ---------- */
.mc-testata-riga { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.mc-host { font-family: var(--font-titoli); font-size: 22px; font-weight: 600; letter-spacing: .4px; line-height: 1.15; }
.mc-ruolo { font-size: 13.5px; color: var(--blu-forte); font-weight: 600; margin: 2px 0; }
.mc-spazio { flex: 1 1 auto; }
.mc-uptime { display: flex; flex-direction: column; align-items: flex-end; }
.mc-uptime .k, .mc-chip .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--mc-dim); }
.mc-uptime .v { font-size: 17px; font-weight: 700; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mc-chip { display: flex; flex-direction: column; background: var(--mc-morbido); border: 1px solid var(--mc-bordo-2); border-radius: 6px; padding: 5px 10px; min-width: 0; }
.mc-chip .v { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- barre di percentuale con i tre livelli ---------- */
.mc-barra-pct { height: 7px; border-radius: 5px; background: var(--mc-bordo-2); overflow: hidden; margin: 6px 0 4px; }
.mc-barra-pct i { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; }
.mc-barra-pct i.ok   { background: var(--mc-ok); }
.mc-barra-pct i.warn { background: var(--mc-warn); }
.mc-barra-pct i.err  { background: var(--mc-err); }

/* ---------- KPI di CPU / RAM / disco / rete ---------- */
.mc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; }
.mc-kpi {
  position: relative; overflow: hidden; background: var(--mc-pannello); border: 1px solid var(--mc-bordo);
  border-radius: var(--raggio); box-shadow: var(--ombra); padding: 14px 16px 12px 18px;
}
.mc-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mc-accento); }
.mc-kpi .k-label { font-family: var(--font-titoli); font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--mc-dim); }
.mc-kpi .k-value { font-size: 26px; font-weight: 750; line-height: 1.1; margin-top: 4px; }
.mc-kpi .k-value small { font-size: 13px; font-weight: 500; color: var(--mc-dim); }
.mc-kpi .k-value.mc-k2 { font-size: 19px; margin-top: 0; }
.mc-kpi .k-sub { font-size: 11.5px; color: var(--mc-dim); margin-top: 3px; }
.mc-kpi .k-sub b { color: var(--mc-testo); }
.mc-core { display: flex; align-items: flex-end; gap: 1px; height: 26px; margin: 6px 0 4px; }
.mc-core i { flex: 1 1 0; min-width: 1px; border-radius: 1px 1px 0 0; background: var(--mc-ok); opacity: .75; }
.mc-core i.warn { background: var(--mc-warn); }
.mc-core i.err { background: var(--mc-err); }

/* ---------- schede video ---------- */
.mc-gpu { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 16px; }
.mc-riga-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.mc-gpu-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 10px; }
.mc-big { font-size: 26px; font-weight: 750; line-height: 1.1; }
.mc-big small { font-size: 12px; font-weight: 500; color: var(--mc-dim); }
.mc-big.mc-m { font-size: 21px; }
.mc-big.ok { color: var(--mc-ok); }
.mc-big.warn { color: var(--attenzione); }
.mc-big.err { color: var(--mc-err); }
.mc-riga { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-top: 6px; }
.mc-riga .k { color: var(--mc-dim); }
.mc-riga .v { font-weight: 600; text-align: right; }
.mc-misure { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; margin-top: 12px; }
.mc-misure > div { display: flex; flex-direction: column; min-width: 0; }
.mc-misure .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .35px; color: var(--mc-dim); }
.mc-misure .v { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.mc-misure .v small { color: var(--mc-dim); font-weight: 400; }
.mc-piede { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mc-bordo-2); font-size: 12px; }
.mc-piede .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .35px; color: var(--mc-dim); }
.mc-residenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; font-size: 12.5px; }
.mc-residenti .k { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--mc-dim); }
.mc-residente { background: var(--mc-pannello); border: 1px solid var(--mc-bordo); border-radius: 20px; padding: 3px 11px; }

/* ---------- energia, token, SGLang: riquadri numerici ---------- */
.mc-energia { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; }
.mc-energia .mp-note { margin-top: 3px; }
.mc-k-titolo { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--mc-dim); font-weight: 600; margin-bottom: 4px; }

/* ---------- grafici SVG (un asse, linee da 2 px, griglia tenue; tooltip = .grafico-tooltip di app.css) ---------- */
.mc-grafico { min-height: 60px; }
.mc-svg { display: block; max-width: 100%; }
.mc-svg text { font-size: 10.5px; fill: var(--mc-dim); font-variant-numeric: tabular-nums; }
.mc-svg .mc-g-unita { fill: var(--mc-dim); font-weight: 600; }
.mc-g-griglia { stroke: var(--mc-bordo-2); stroke-width: 1; }
.mc-g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mc-g-linea.s0 { stroke: var(--mc-potenza); }
.mc-g-linea.s1 { stroke: var(--mc-serie-1); }
.mc-g-area { opacity: .10; }
.mc-g-area.s0 { fill: var(--mc-potenza); }
.mc-g-area.s1 { fill: var(--mc-serie-1); }
.mc-g-zona { fill: transparent; }
.mc-g-zona:hover { fill: rgba(116, 72, 255, .08); }
.mc-g-col.s1 { fill: var(--mc-serie-1); }
.mc-g-col.s2 { fill: var(--mc-serie-2); }
.mc-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--mc-dim); margin-top: 4px; }
.mc-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.mc-legenda i.s0 { background: var(--mc-potenza); }
.mc-legenda i.s1 { background: var(--mc-serie-1); }
.mc-legenda i.s2 { background: var(--mc-serie-2); }

/* ---------- temperature ---------- */
.mc-temps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mc-temp { display: flex; flex-direction: column; background: var(--mc-morbido); border: 1px solid var(--mc-bordo-2); border-left: 3px solid var(--mc-bordo); border-radius: 6px; padding: 8px 11px; min-width: 0; }
.mc-temp.ok { border-left-color: var(--mc-ok); }
.mc-temp.warn { border-left-color: var(--mc-warn); }
.mc-temp.err { border-left-color: var(--mc-err); }
.mc-temp .k { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-temp .v { font-size: 21px; font-weight: 750; line-height: 1.2; }
.mc-temp .v small { font-size: 12px; color: var(--mc-dim); font-weight: 500; }
.mc-temp.warn .v { color: var(--attenzione); }
.mc-temp.err .v { color: var(--mc-err); }
.mc-temp .f { font-size: 10.5px; color: var(--mc-dim); }
.mc-cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.mc-core-socket .k { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--mc-dim); margin-bottom: 6px; }
.mc-core-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
.mc-core-griglia span { display: flex; flex-direction: column; align-items: center; padding: 3px 0; border-radius: 5px; background: var(--mc-morbido); font-size: 12.5px; font-weight: 700; }
.mc-core-griglia span i { font-style: normal; font-size: 9.5px; color: var(--mc-dim); font-weight: 500; }
.mc-core-griglia span.ok { background: var(--ok-bg); }
.mc-core-griglia span.warn { background: var(--attenzione-bg); color: var(--attenzione); }
.mc-core-griglia span.err { background: var(--errore-bg); color: var(--mc-err); }

/* ---------- ventole e alimentazione ---------- */
.mc-hr { border: 0; border-top: 1px solid var(--mc-bordo-2); margin: 12px 0 6px; }
.mc-log {
  background: var(--mc-morbido); border: 1px solid var(--mc-bordo-2); border-radius: 6px; padding: 8px 10px; margin: 6px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 140px; overflow: auto;
}
.mc-psu-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.mc-psu { border: 1px solid var(--mc-bordo-2); border-left: 3px solid var(--mc-ok); border-radius: 6px; padding: 8px 11px; background: var(--mc-morbido); }
.mc-psu.warn { border-left-color: var(--mc-warn); }
.mc-psu .k { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--mc-dim); }
.mc-psu .v { font-size: 13.5px; font-weight: 700; }

/* ---------- telefono ---------- */
@media (max-width: 720px) {
  .mc-gpu { grid-template-columns: minmax(0, 1fr); }
  .mc-big { font-size: 22px; }
  .mc-uptime { align-items: flex-start; }
  .mc-ctrl input[type="text"] { width: 100%; max-width: none; }
  .mc-motivo { min-width: 200px; }
}