/* Dashboard/Graph page styles. Scoped to dashboard only. */
.page-dashboard .dashboard-main-graph-card{
  border-color:rgba(53,167,255,.24);
}
.page-dashboard .graph-toolbar{
  align-items:flex-start;
}
.page-dashboard .graph-controls{
  justify-content:flex-end;
}
.page-dashboard .dashboard-status-section{
  margin-top:24px;
}
.page-dashboard .dashboard-status-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  width:100%;
}
.page-dashboard .dashboard-status-card{
  border-left:3px solid var(--system-color, var(--blue));
}
.page-dashboard .dashboard-status-card .status-reason{
  margin-top:10px;
}
.page-dashboard .dashboard-mini-metrics{
  margin-top:10px;
}
.page-dashboard .graph-message{
  min-height:1.2em;
}
@media (max-width:720px){
  .page-dashboard .graph-controls{
    justify-content:flex-start;
  }
  .page-dashboard .dashboard-status-grid{
    grid-template-columns:1fr;
  }
}

/* Dashboard uses the available content width. */
.content-panel.content-panel-dashboard,
.content-panel:has(.page-dashboard){
  max-width:none;
}
.page-dashboard,
.page-dashboard .dashboard-main-graph-card,
.page-dashboard .dashboard-status-section,
.page-dashboard .dashboard-status-grid{
  width:100%;
}

/* Consistent dashboard edge spacing. */
.content-panel.content-panel-dashboard,
.content-panel:has(.page-dashboard){
  padding-inline:32px;
}
.page-dashboard .page-intro{
  margin-bottom:20px;
}
.page-dashboard .dashboard-main-graph-card{
  margin-inline:0;
}
.page-dashboard .dashboard-status-section{
  margin-top:26px;
}
.page-dashboard .dashboard-status-grid{
  gap:18px;
}
@media (max-width:900px){
  .content-panel.content-panel-dashboard,
.content-panel:has(.page-dashboard){
    padding-inline:24px;
  }
}
@media (max-width:560px){
  .content-panel.content-panel-dashboard,
.content-panel:has(.page-dashboard){
    padding-inline:16px;
  }
}


/* Reliable spacing selector using router-managed content-panel classes. */
.content-panel.content-panel-dashboard{
  max-width:none;
  width:100%;
  padding-inline:32px;
}
.content-panel.content-panel-dashboard > .page-dashboard{
  width:100%;
  max-width:none;
  margin-inline:0;
}
@media (max-width:900px){
  .content-panel.content-panel-dashboard{padding-inline:24px;}
}
@media (max-width:560px){
  .content-panel.content-panel-dashboard{padding-inline:16px;}
}

/* 31R-I-H5n dashboard offline graph polish */
.h5n-offline-graph-root svg path,
.h5n-offline-graph-root svg polyline,
svg.h5n-offline-graph-svg path,
svg.h5n-offline-graph-svg polyline {
  transition: stroke 160ms ease, filter 160ms ease;
}