/* ==========================================================================
   DE-OS · finta dashboard industriale (decorativa, homepage)
   Renderizzata da assets/js/dashboard.js dentro #de-dash.
   Usa i token del sito definiti in :root (main.css).
   ========================================================================== */

#de-dash .dd {
  display: flex;
  flex-direction: column;
  height: clamp(420px, 55vw, 560px);
  border-radius: 24px;
  border: 1px solid rgba(245, 255, 247, .11);
  background:
    linear-gradient(180deg, rgba(245, 255, 247, .05), rgba(245, 255, 247, .02)),
    var(--ink, #0E0E10);
  box-shadow: inset 0 1px 0 rgba(245, 255, 247, .09);
  overflow: hidden;
  color: var(--foam, #F5FFF7);
  font-family: var(--mono, 'Space Mono', monospace);
  user-select: none;
  -webkit-user-select: none;
}

/* header ----------------------------------------------------------------- */
#de-dash .dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(245, 255, 247, .1);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

#de-dash .dd-head-id { color: var(--muted, rgba(245, 255, 247, .6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#de-dash .dd-head-id strong { color: var(--foam, #F5FFF7); font-weight: 700; }

#de-dash .dd-head-status { display: flex; align-items: center; gap: 14px; white-space: nowrap; }

#de-dash .dd-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(107, 255, 106, .3);
  border-radius: 999px;
  color: var(--acc, #6BFF6A);
  background: var(--acc-soft, rgba(107, 255, 106, .14));
}

#de-dash .dd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc, #6BFF6A);
  box-shadow: 0 0 8px var(--acc, #6BFF6A);
  animation: dd-pulse 1.6s ease-in-out infinite;
}

#de-dash .dd-uptime { color: var(--muted, rgba(245, 255, 247, .6)); }
#de-dash .dd-uptime b {
  color: var(--foam, #F5FFF7);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

@keyframes dd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

/* griglia pannelli --------------------------------------------------------- */
#de-dash .dd-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}

#de-dash .dd-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(245, 255, 247, .11);
  background: rgba(245, 255, 247, .045);
  box-shadow: inset 0 1px 0 rgba(245, 255, 247, .09);
  overflow: hidden;
}

#de-dash .dd-span2 { grid-column: span 2; }

#de-dash .dd-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, rgba(245, 255, 247, .6));
  flex: 0 0 auto;
}

#de-dash .dd-panel-head .dd-tag { color: var(--faint, #7E837F); font-size: 9px; }

#de-dash .dd-big {
  font-family: var(--sans, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.1;
  color: var(--acc, #6BFF6A);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#de-dash .dd-unit {
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 11px;
  font-weight: 400;
  color: var(--muted, rgba(245, 255, 247, .6));
  margin-left: 4px;
}

#de-dash .dd-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted, rgba(245, 255, 247, .6));
  flex: 0 0 auto;
}

#de-dash .dd-state {
  font-weight: 700;
  color: var(--faint, #7E837F);
  font-variant-numeric: tabular-nums;
}
#de-dash .dd-state.is-on { color: var(--acc, #6BFF6A); }

/* manometro ---------------------------------------------------------------- */
#de-dash .dd-gauge-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
#de-dash .dd-gauge-wrap svg { height: 100%; max-height: 128px; width: auto; }
#de-dash .dd-gauge-track { stroke: rgba(245, 255, 247, .12); }
#de-dash .dd-gauge-val { stroke: var(--acc, #6BFF6A); }
#de-dash .dd-gauge-tick { stroke: rgba(245, 255, 247, .3); }
#de-dash .dd-gauge-needle { stroke: var(--foam, #F5FFF7); }
#de-dash .dd-gauge-hub { fill: var(--foam, #F5FFF7); }

/* sparkline + tubazione ----------------------------------------------------- */
#de-dash .dd-spark {
  flex: 1 1 auto;
  min-height: 34px;
  margin: 8px 0 4px;
}
#de-dash .dd-spark svg { display: block; width: 100%; height: 100%; }
#de-dash .dd-spark-line { fill: none; stroke: var(--acc, #6BFF6A); stroke-width: 1.5; }
#de-dash .dd-spark-set {
  fill: none;
  stroke: rgba(245, 255, 247, .38);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

#de-dash .dd-pipe-wrap { flex: 0 0 auto; height: 34px; }
#de-dash .dd-pipe-wrap svg { display: block; width: 100%; height: 100%; }
#de-dash .dd-pipe-base {
  fill: none;
  stroke: rgba(245, 255, 247, .12);
  stroke-width: 6;
  stroke-linecap: round;
}
#de-dash .dd-pipe-flow {
  fill: none;
  stroke: var(--acc, #6BFF6A);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  opacity: .9;
}

/* assi servo ----------------------------------------------------------------- */
#de-dash .dd-axes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 6px;
  padding-top: 6px;
}

#de-dash .dd-axis {
  display: grid;
  grid-template-columns: 18px 1fr 82px;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}

#de-dash .dd-axis-name { color: var(--muted, rgba(245, 255, 247, .6)); font-weight: 700; }

#de-dash .dd-axis-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(245, 255, 247, .1);
}

#de-dash .dd-axis-cursor {
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  background: var(--acc, #6BFF6A);
  box-shadow: 0 0 10px var(--acc-soft, rgba(107, 255, 106, .14));
  will-change: transform;
}

#de-dash .dd-axis-val {
  text-align: right;
  color: var(--foam, #F5FFF7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#de-dash .dd-axis-val small { color: var(--faint, #7E837F); font-size: 9px; }

/* valvole ---------------------------------------------------------------------- */
#de-dash .dd-valves {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 8px;
}

#de-dash .dd-valve {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(245, 255, 247, .08);
  background: rgba(245, 255, 247, .03);
  font-size: 10px;
  letter-spacing: .1em;
  min-height: 34px;
}

#de-dash .dd-valve-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(245, 255, 247, .22);
  flex: 0 0 auto;
  transition: background var(--fast, 200ms), box-shadow var(--fast, 200ms);
}
#de-dash .dd-valve.is-open .dd-valve-led {
  background: var(--acc, #6BFF6A);
  box-shadow: 0 0 8px var(--acc, #6BFF6A);
}

#de-dash .dd-valve-name { color: var(--foam, #F5FFF7); font-weight: 700; }
#de-dash .dd-valve-state { margin-left: auto; color: var(--faint, #7E837F); }
#de-dash .dd-valve.is-open .dd-valve-state { color: var(--acc, #6BFF6A); }

/* console ------------------------------------------------------------------------ */
#de-dash .dd-console {
  flex: 0 0 auto;
  height: 132px;
  padding: 10px 18px 12px;
  border-top: 1px solid rgba(245, 255, 247, .1);
  background: rgba(14, 14, 16, .55);
  font-size: 11px;
  line-height: 1.6;
  overflow: hidden;
}

#de-dash .dd-console-title {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint, #7E837F);
  margin-bottom: 2px;
}

#de-dash .dd-line { color: var(--muted, rgba(245, 255, 247, .6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#de-dash .dd-line-t { color: var(--faint, #7E837F); margin-right: 8px; font-variant-numeric: tabular-nums; }
#de-dash .dd-line em { font-style: normal; color: var(--acc, #6BFF6A); }

#de-dash .dd-caret { color: var(--acc, #6BFF6A); }
#de-dash .dd-caret::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--acc, #6BFF6A);
  animation: dd-blink 1.1s steps(1) infinite;
}

@keyframes dd-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

/* responsive ------------------------------------------------------------------- */
@media (max-width: 959px) {
  #de-dash .dd { height: auto; }
  #de-dash .dd-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  #de-dash .dd-panel { min-height: 180px; }
  #de-dash .dd-gauge-wrap svg { max-height: 116px; }
}

@media (max-width: 559px) {
  #de-dash .dd-grid { grid-template-columns: 1fr; }
  #de-dash .dd-span2 { grid-column: auto; }
  #de-dash .dd-panel { min-height: 168px; }
  #de-dash .dd-head { padding: 10px 14px; }
  #de-dash .dd-uptime span[data-l10n] { display: none; }
}

/* reduced motion: snapshot statico, nessuna animazione --------------------------- */
@media (prefers-reduced-motion: reduce) {
  #de-dash .dd-dot,
  #de-dash .dd-caret::after { animation: none; }
  #de-dash .dd-valve-led { transition: none; }
}