/* Scoped to the server resource module; existing page sizes and styles are untouched. */
.server-status-panel {
  margin: 0 0 20px;
  padding: 5px 18px;
}
.server-status-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.server-status-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 10px;
  text-align: center;
}
.server-status-metric + .server-status-metric { border-left: 1px solid #edf2f7; }
.server-status-gauge { position: relative; width: 142px; height: 123px; max-width: 100%; flex: 0 0 auto; }
.server-status-gauge svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* A slightly smaller circle with a stronger stroke; the layout and text stay fixed. */
.server-status-gauge path { fill: none; stroke-width: 5px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.server-status-gauge-track { stroke: #edf2f7; }
.server-status-gauge-fill { stroke: var(--accent); }
.server-status-gauge-fill[data-tone="warning"] { stroke: #e7b420; }
.server-status-gauge-fill[data-tone="critical"] { stroke: var(--positive); }
.server-status-percent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 13.333333%;
  color: #222;
  font-size: 13px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.server-status-label { margin-top: 0; font-size: 13px; font-weight: 500; line-height: 1.5; }
.server-status-value {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.server-status-value-total::before { content: " / "; }
.server-network { display: grid; grid-template-columns: 36px 98px; align-content: center; justify-content: center; gap: 14px 12px; padding: 14px 8px; text-align: left; }
.server-network-title { grid-column: 2; font-size: 13px; font-weight: 500; line-height: 1.5; }
.server-network-rate { display: contents; }
.server-network-direction { grid-column: 1; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: var(--muted); }
.server-network-arrow { color: var(--accent); font-size: 20px; line-height: 1; }
.server-network-reading { grid-column: 2; display: grid; grid-template-columns: 64px 29px; align-items: baseline; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.server-network-reading strong { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.server-network-unit { font-size: 11px; color: var(--muted); min-width: 29px; text-align: left; }
@media (min-width: 761px) and (max-width: 1200px) {
  .server-network { grid-template-columns: 33px 82px; column-gap: 7px; padding-left: 4px; padding-right: 4px; }
  .server-network-direction { gap: 3px; }
  .server-network-reading { grid-template-columns: 53px 25px; gap: 4px; }
  .server-network-reading strong { font-size: 19px; }
  .server-network-unit { font-size: 10px; min-width: 25px; }
}
@media (max-width: 760px) {
  .server-status-panel { padding: 3px 8px 1px; margin-bottom: 16px; }
  .server-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .server-status-metric { justify-content: flex-start; padding: 2px 0; }
  .server-status-gauge { width: min(104px, 100%); height: 86px; }
  .server-status-gauge path { stroke-width: 3.4px; }
  .server-status-percent { font-size: 11px; }
  .server-status-label { font-size: 12px; }
  .server-status-value { display: none; }
  .server-network {
    grid-column: 1 / -1; display: grid; grid-template-columns: auto auto auto;
    justify-content: space-between; gap: 6px; padding: 7px 5px; margin-top: 5px;
    border-left: 0 !important; border-top: 1px solid #edf2f7; align-items: center;
  }
  .server-network-title { grid-column: auto; font-size: 11px; text-align: left; }
  .server-network-rate { display: inline-flex; align-items: baseline; gap: 4px; }
  .server-network-direction { grid-column: auto; font-size: 11px; gap: 0; }
  .server-network-direction-label { display: none; }
  .server-network-arrow { font-size: 16px; }
  .server-network-reading { grid-column: auto; display: inline-flex; gap: 3px; }
  .server-network-reading strong { font-size: 17px; }
  .server-network-unit { font-size: 10px; min-width: 0; }
}