/* Scoped styles for the monitor UI only */
#webstack-monitor {
  --bg:#0b1220; --panel:#0f1a2b; --card:#15253c; --text:#e8eef7; --headers:#0c67f0;
  --muted:#2c2f33; --accent:#7cc5ff; --warn:#ffd16a;
}

#webstack-monitor .wm-container{
  max-width:80vw;
  margin:0 auto;
  padding:18px;
  color:var(--headers);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';
}

#webstack-monitor .wm-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
#webstack-monitor .wm-header h1{margin:0;font-size:24px;letter-spacing:.5px;color:var(--headers);}
#webstack-monitor .wm-subheader{color:var(--muted);font-size:20px;}
#webstack-monitor .wm-subheader code{background:#0c1627;color:var(--accent);padding:2px 6px;border-radius:6px;}

#webstack-monitor .wm-controls{display:flex;gap:12px;align-items:center;margin:8px 0 16px;}
#webstack-monitor .wm-controls .wm-dropdown{width:180px;}

#webstack-monitor .wm-cards{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
  margin-bottom:12px;
}

#webstack-monitor .wm-card{
  background:var(--card);
  border:1px solid #1f314d;
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 0 0 1px #0d1829 inset;
}
#webstack-monitor .wm-card h3{margin:0 0 6px;font-size:14px;color:var(--accent);}
#webstack-monitor .wm-card p{margin:4px 0;color:var(--text);font-size:14px;}
#webstack-monitor .wm-card.warn{border-color:var(--warn);}

/* === Graphs grid: ONLY this area scrolls === */
#webstack-monitor .wm-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;

  /* Force a scrollable region regardless of outer layout */
  max-height: 73vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}

/* New: Graph tile header + info icon */
#webstack-monitor .wm-graph-tile{
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid #1f314d;
  padding: 6px 8px 8px;
}
#webstack-monitor .wm-graph-head{
  display:flex; align-items:center; gap:.5rem; padding:.1rem .25rem .45rem .15rem;
}
#webstack-monitor .wm-graph-title{ font-weight:600; color:var(--text); opacity:.9; }
#webstack-monitor .wm-graph-info{ margin-left:auto; cursor:help; opacity:.75; color:var(--text); }
#webstack-monitor .wm-graph-info:hover{ opacity:1; }

/* Footer sits below, not part of the scroll area */
#webstack-monitor .wm-footer{color:var(--muted);margin:14px 2px;font-size:18px;}

/* Dash core components (scoped) */
#webstack-monitor .Select-control{background:var(--panel)!important;border-color:#20324e!important;color:var(--text)!important;}
#webstack-monitor .Select-menu-outer{background:var(--panel)!important;color:var(--text)!important;}
#webstack-monitor .Select-value-label{color:var(--text)!important;}
#webstack-monitor .rc-slider-track{background:var(--accent)!important;}
#webstack-monitor .rc-slider-handle{border-color:var(--accent)!important;}

/* ---- Plotly fixes (scoped) ---- */

/* Keep the SVG transparent so traces aren't masked. Rounded corners still applied. */
#webstack-monitor .js-plotly-plot .plotly .main-svg{
  background: transparent !important;
  border-radius: 14px;
  overflow: hidden;
}

/* Style the Dash graph wrapper (safe). Do NOT style .plot-container to avoid growth. */
#webstack-monitor .dash-graph{
  background: var(--panel);
  border-radius: 14px;
  padding: 8px;
}

/* Ensure the inner plot respects the graph container size */
#webstack-monitor .dash-graph .js-plotly-plot,
#webstack-monitor .dash-graph .plot-container{
  height: 100% !important;
}

/* Keep traces visible on dark theme */
#webstack-monitor .js-plotly-plot .scatterlayer path{
  opacity: 1 !important;
  stroke-width: 2px !important;
}
#webstack-monitor .js-plotly-plot .barlayer rect,
#webstack-monitor .js-plotly-plot .barlayer path{
  opacity: 1 !important;
}

/* (Optional) prettier thin scrollbar */
#webstack-monitor .wm-grid::-webkit-scrollbar{width:10px}
#webstack-monitor .wm-grid::-webkit-scrollbar-thumb{background:#1f314d;border-radius:8px}
#webstack-monitor .wm-grid::-webkit-scrollbar-track{background:#0c1627;border-radius:8px}