/* © 2026 bladept696 — Centro de Comando / Hash Commander. Todos os direitos reservados.
   É proibido copiar, modificar, redistribuir ou publicar este ficheiro, no todo ou em parte, sem autorização escrita do autor.
   https://github.com/bladept696/centro-de-comando-v3 */
/* ---------- Dashboard Geral: totais em cartões de vidro com mini-gráfico (totais-vidro.js) ---------- */
/* A coluna dos totais passa a grelha: 1 coluna se for estreita (280 px), 2 quando há largura (telemóvel, painel largo) */
.sidebar:has(.gauge.tv){display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;align-items:start;align-content:start}
.sidebar:has(.gauge.tv) > :not(.gauge){grid-column:1 / -1}

.sidebar .gauge.tv{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ic lbl" "val val" "spark spark";align-items:center;column-gap:10px;row-gap:2px;
  padding:14px 14px 10px;border-radius:18px;min-width:0;
  background:linear-gradient(150deg,#ffffff14,#ffffff05 40%,#00000022);border:1px solid #ffffff1c;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 18px 30px -18px #000,inset 0 1px 0 #ffffff22;
  transform:none;transform-style:flat;animation:none}
.sidebar .gauge.tv:hover,.sidebar .gauge.tv.g3d-on{transform:none;border-color:color-mix(in srgb,var(--gc,#21ffb0) 45%,#ffffff1c)}
.sidebar .gauge.tv > *{position:relative;z-index:1}

/* brilho de cor no canto, a respirar */
.sidebar .gauge.tv::after{content:"";display:block;position:absolute;z-index:0;right:-30px;top:-30px;left:auto;bottom:auto;width:110px;height:110px;
  border-radius:50%;transform:none;background:radial-gradient(var(--gc,#21ffb0),transparent 70%);opacity:.35;pointer-events:none;
  animation:tv-orb 4s ease-in-out infinite}
@keyframes tv-orb{50%{opacity:.6;transform:scale(1.15)}}
/* luz a passar no vidro, de 5 em 5 s */
.sidebar .gauge.tv::before{content:"";display:block;position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,#ffffff1f 50%,transparent 65%);background-size:250% 100%;background-position:130% 0;
  animation:tv-shine 5s ease-in-out infinite}
@keyframes tv-shine{0%,55%{background-position:130% 0}100%{background-position:-130% 0}}

/* ícone e rótulo */
.sidebar .gauge.tv .g3d-ic{grid-area:ic;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;transform:none;font-size:20px}
.sidebar .gauge.tv .gauge-left{grid-area:lbl;transform:none;min-width:0}
.sidebar .gauge.tv .label{font-size:10px;letter-spacing:.14em;color:#b6c4d3;overflow-wrap:anywhere}
.sidebar .gauge.tv .gauge-left .unit{display:none}
.sidebar .gauge.tv .g3d-meter{display:none}

/* número grande + unidade */
.sidebar .gauge.tv .gauge-right{grid-area:val;transform:none;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;
  gap:2px 6px;text-align:left;margin-top:6px;min-width:0}
.sidebar .gauge.tv .value{font-family:'Orbitron','Space Grotesk',sans-serif;font-size:28px;font-weight:900;color:#fff;letter-spacing:0;
  text-shadow:0 0 14px color-mix(in srgb,var(--gc,#21ffb0) 70%,transparent);transition:color .3s;min-width:0}
.sidebar .gauge.tv .value.red{color:var(--red,#ff5d5d)}
.sidebar .gauge.tv .gauge-right .unit{font-size:11px;font-weight:600;color:var(--gc,#21ffb0);white-space:nowrap}

/* mini-gráfico */
.tv-spark{grid-area:spark;position:relative;height:28px;margin-top:4px;display:block}
.tv-spark svg{display:block;width:100%;height:100%;overflow:visible;color:var(--gc,#21ffb0)}
.tv-spark polyline{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 3px currentColor)}
.tv-spark polyline.tv-draw{stroke-dasharray:600;stroke-dashoffset:600;animation:tv-draw 1.4s ease-out forwards}
@keyframes tv-draw{to{stroke-dashoffset:0}}
/* ponto final do gráfico, a pulsar */
.tv-dot{position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px var(--gc,#21ffb0);transition:top .6s ease}
.tv-dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--gc,#21ffb0);animation:tv-ping 1.6s ease-out infinite}
@keyframes tv-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.2);opacity:0}}
/* linha em vez de gráfico (Máquinas) */
.tv-sub{grid-area:spark;font-size:9.5px;letter-spacing:0;color:#b6c4d3;margin-top:4px;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ligeiro "salto" quando o valor muda */
.sidebar .gauge.tv.tv-bump{animation:tv-bump .5s ease-out}
@keyframes tv-bump{30%{transform:scale(1.04)}}

/* telemóvel: números um pouco mais pequenos para caberem 2 colunas */
@media (max-width:520px){.sidebar .gauge.tv .value{font-size:22px}.sidebar .gauge.tv{padding:12px 12px 8px}}

/* modo leve e movimento reduzido: sem animações */
body.perf-mode .sidebar .gauge.tv,body.perf-mode .sidebar .gauge.tv::before,body.perf-mode .sidebar .gauge.tv::after,
body.perf-mode .tv-dot::after,body.perf-mode .tv-spark polyline{animation:none}
body.perf-mode .sidebar .gauge.tv{backdrop-filter:none;-webkit-backdrop-filter:none}
body.perf-mode .sidebar .gauge.tv::before{display:none}
body.perf-mode .tv-spark polyline.tv-draw{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .sidebar .gauge.tv,.sidebar .gauge.tv::before,.sidebar .gauge.tv::after,.tv-dot::after,.tv-spark polyline{animation:none}
  .sidebar .gauge.tv::before{display:none}
  .tv-spark polyline.tv-draw{stroke-dashoffset:0}
}

/* Máquinas: a linha "N online · M registadas" já diz tudo; esconde a unidade "Registadas" repetida */
.gauge:has(.tv-sub) .unit{display:none;}