/* Monitoring page-specific layout. No global Matrix/Admin overrides. */
.page-monitoring .monitoring-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.page-monitoring .monitoring-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.page-monitoring .monitoring-item{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--system-color, var(--blue)) 28%,rgba(109,178,255,.22));
}
.page-monitoring .monitoring-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--system-color, var(--blue));
  opacity:.92;
  box-shadow:0 0 18px color-mix(in srgb,var(--system-color, var(--blue)) 58%,transparent);
}
.page-monitoring .monitoring-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:15px 18px 15px 20px;
}
.page-monitoring .monitoring-title-block{min-width:0;}
.page-monitoring .monitoring-title-block h3{margin:2px 0 5px;font-size:1.18rem;}
.page-monitoring .monitoring-title-block p:last-child{margin:0;}
.page-monitoring .monitoring-summary-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.page-monitoring .monitoring-detail{padding:0 18px 18px 20px;}
.page-monitoring .monitoring-metrics{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;}
.page-monitoring .monitoring-mini{margin-top:12px;height:96px;min-height:96px;}
.page-monitoring .monitoring-mini canvas{width:100%;height:100%;}
.page-monitoring .mini-graph-fallback,
.page-monitoring .monitoring-empty{
  border:1px dashed rgba(109,178,255,.35);
  border-radius:14px;
  padding:14px;
  color:var(--muted);
  background:rgba(8,17,31,.52);
}
.page-monitoring .monitoring-warning{margin-bottom:12px;}
@media (max-width:900px){
  .page-monitoring .monitoring-actions,
  .page-monitoring .monitoring-summary{grid-template-columns:1fr;display:grid;}
  .page-monitoring .monitoring-summary-actions{justify-content:start;}
  .page-monitoring .monitoring-metrics{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;}
}
@media (max-width:560px){.page-monitoring .monitoring-metrics{grid-template-columns:1fr;}}

.page-monitoring .monitoring-list,
.page-monitoring .monitoring-actions{
  width:100%;
}
.page-monitoring .monitoring-item>summary{
  list-style:none;
  cursor:pointer;
}
.page-monitoring .monitoring-item>summary::-webkit-details-marker{
  display:none;
}
.page-monitoring .monitoring-item>summary::before{
  content:"▶";
  color:var(--system-color, var(--blue));
  font-weight:900;
  text-shadow:0 0 12px color-mix(in srgb,var(--system-color, var(--blue)) 60%,transparent);
}
.page-monitoring .monitoring-item[open]>summary::before{
  content:"▼";
}
.page-monitoring .monitoring-detail{
  border-top:1px solid rgba(109,178,255,.13);
}

/* Monitoring summary alignment after details-arrow change. */
.page-monitoring .monitoring-item > summary.monitoring-summary{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px;
}
.page-monitoring .monitoring-item > summary.monitoring-summary::before{
  grid-column:1;
  justify-self:center;
  align-self:center;
  width:18px;
  text-align:center;
}
.page-monitoring .monitoring-item > summary.monitoring-summary .monitoring-title-block{
  grid-column:2;
  justify-self:stretch;
}
.page-monitoring .monitoring-item > summary.monitoring-summary .monitoring-summary-actions{
  grid-column:3;
  justify-self:end;
}
@media (max-width:900px){
  .page-monitoring .monitoring-item > summary.monitoring-summary{
    grid-template-columns:auto minmax(0,1fr);
  }
  .page-monitoring .monitoring-item > summary.monitoring-summary .monitoring-summary-actions{
    grid-column:2;
    justify-self:start;
  }
}

/* Monitoring uses the available content width. */
.content-panel.content-panel-monitoring,
.content-panel:has(.page-monitoring){
  max-width:none;
}
.page-monitoring,
.page-monitoring .monitoring-actions,
.page-monitoring .monitoring-list,
.page-monitoring .monitoring-item{
  width:100%;
}

/* Consistent Monitoring edge spacing. */
.content-panel.content-panel-monitoring,
.content-panel:has(.page-monitoring){
  padding-inline:32px;
}
.page-monitoring .page-intro{
  margin-bottom:20px;
}
.page-monitoring .monitoring-actions{
  margin-bottom:20px;
}
.page-monitoring .monitoring-list{
  gap:14px;
}
.page-monitoring .monitoring-item > summary.monitoring-summary{
  padding:16px 20px 16px 22px;
}
.page-monitoring .monitoring-detail{
  padding:0 20px 20px 22px;
}
@media (max-width:900px){
  .content-panel.content-panel-monitoring,
.content-panel:has(.page-monitoring){
    padding-inline:24px;
  }
}
@media (max-width:560px){
  .content-panel.content-panel-monitoring,
.content-panel:has(.page-monitoring){
    padding-inline:16px;
  }
}


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

/* 31R-I-H5n monitoring meta dot removal */
.server-card__meta::before,
.monitoring-card__meta::before,
.system-card__meta::before,
.card-meta::before,
[class*="meta"]::before,
[class*="type"]::before {
  content: none !important;
  display: none !important;
}

.server-card__meta > .status-dot,
.monitoring-card__meta > .status-dot,
.system-card__meta > .status-dot,
.card-meta > .status-dot,
[class*="meta"] > .status-dot,
[class*="type"] > .status-dot,
[class*="meta"] > .dot,
[class*="type"] > .dot {
  display: none !important;
}

/* 31R-I-H5ag: use the improved /server edge stripe on /monitoring too
   Der /server Streifen aus H5af sieht besser aus als der alte Monitoring-Streifen.
   Deshalb übernimmt Monitoring jetzt denselben Card-Edge-Look.
*/
.page-monitoring .monitoring-item,
.monitoring-item {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-color: color-mix(in srgb, var(--system-color, var(--blue)) 28%, rgba(109,178,255,.22)) !important;
  box-shadow:
    inset 4px 0 0 var(--system-color, var(--blue)),
    inset 0 0 0 1px color-mix(in srgb, var(--system-color, var(--blue)) 13%, transparent) !important;
}

.page-monitoring .monitoring-item::before,
.monitoring-item::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: var(--system-color, var(--blue)) !important;
  opacity: .92 !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--system-color, var(--blue)) 58%, transparent) !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

.page-monitoring .monitoring-item > summary.monitoring-summary,
.monitoring-item > summary.monitoring-summary {
  background: transparent !important;
  border-left: 0 !important;
  box-shadow: none !important;
}