/* =================================================
   JOOMLA WRAPPER (ersetzt :host aus ThingsBoard)
================================================= */
.gts-wrap{
  display:block;
  width:100%;
  height:100%;
}

/* =================================================
   GTS CARD – HELLER MILCHGLAS LOOK
================================================= */
.gts-card{
  width:100%;
  height:100%;
  border-radius:14px;
  padding:12px;
  box-sizing:border-box;

  /* HELLER MILCHGLAS-EFFEKT */
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);

  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.45);

  color:#1f2933;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/* =================================================
   HEADER / TOP ROW
================================================= */
.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

/* Filigrane Typografie */
.title{
  font-size:15px;
  font-weight:500;
  letter-spacing:0.35px;
  color:#1f2933;
}

.sub{
  margin-top:2px;
  font-size:12px;
  font-weight:400;
  letter-spacing:0.25px;
  color:#4b5563;
}

.val{
  font-size:24px;
  font-weight:600;
  letter-spacing:0.4px;
  text-align:right;
  white-space:nowrap;
  color:#111827;
}

.unit{
  font-size:11px;
  font-weight:400;
  opacity:0.75;
  margin-left:4px;
  color:#4b5563;
}

/* =================================================
   PLOT AREA
================================================= */
.plot{
  flex:1;
  min-height:0;
  border-radius:10px;
  overflow:hidden;
  background: rgba(255,255,255,0.45);
}

/* Plotly optisch beruhigen */
.plot canvas,
.plot svg{
  filter: brightness(1.04) contrast(0.94);
}

/* Achsen & Grid filigraner wirken lassen */
.plot .xtick text,
.plot .ytick text{
  font-weight:400 !important;
  fill: rgba(0,0,0,0.65) !important;
}

.plot .gridlayer path{
  stroke-width:0.5 !important;
  stroke: rgba(0,0,0,0.08) !important;
  shape-rendering: crispEdges;
}
.plot{
  flex:1;
  min-height:320px;   /* <- DAS ist der Fix */
  border-radius:10px;
  overflow:hidden;
  background: rgba(255,255,255,0.45);
}
/* =================================================
   TEST UI AUSBLENDEN
================================================= */
.testrow{
  display:none !important;
}