.server-status-view {
  --server-border: #d8e2ef;
  --server-muted: #68788c;
  --server-blue: #1769c2;
  --server-green: #25815d;
  --server-red: #c3403c;
  --server-amber: #a96a13;
  padding-bottom: 32px;
}

.server-status-view > * {
  width: var(--settings-1920-content-width);
  min-width: var(--settings-1920-content-width);
  max-width: var(--settings-1920-content-width);
}

.server-status-head,
.server-status-actions {
  display: flex;
  align-items: center;
}

.server-status-head {
  justify-content: space-between;
}

.server-status-actions {
  gap: 12px;
}

.server-status-actions span {
  color: var(--server-muted);
  font-size: 12px;
}

.server-status-summary,
.server-status-panel {
  border: 1px solid var(--server-border);
  background: #fff;
}

.server-status-summary {
  margin-top: 10px;
}

.server-status-loading,
.server-status-error {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--server-muted);
}

.server-status-error {
  flex-direction: column;
  gap: 4px;
  color: var(--server-red);
}

.server-overall {
  min-height: 72px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--server-border);
}

.server-overall > div,
.server-service-main > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.server-overall span {
  padding: 4px 10px;
  border: 1px solid currentColor;
  color: var(--server-green);
  font-size: 12px;
  font-weight: 700;
}

.server-overall.warning span {
  color: var(--server-red);
}

.server-overall strong {
  color: #17263a;
  font-size: 22px;
}

.server-overall small,
.server-service-main span,
.server-service-main small,
.server-status-panel-head small {
  color: var(--server-muted);
}

.server-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.server-service-row {
  min-height: 76px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 90px 96px;
  align-items: center;
  column-gap: 12px;
  border-right: 1px solid var(--server-border);
  border-bottom: 1px solid var(--server-border);
}

.server-service-row:nth-child(even) {
  border-right: 0;
}

.server-service-state,
.server-check-mark {
  width: 8px;
  height: 8px;
  background: var(--server-green);
}

.server-service-row.danger .server-service-state,
.server-check-mark.danger {
  background: var(--server-red);
}

.server-check-mark.working {
  background: var(--server-blue);
}

.server-service-main strong {
  color: #17263a;
  font-size: 14px;
}

.server-service-main span,
.server-service-main small {
  font-size: 11px;
}

.server-service-memory {
  color: #3f5065;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.server-restart-btn {
  min-width: 86px;
  color: var(--server-blue);
  border-color: #a9c8ea;
}

.server-restart-btn:hover {
  background: #edf6ff;
}

.server-monitor-only {
  color: #8794a4;
  font-size: 12px;
  text-align: center;
}

.server-resource-panel {
  margin-top: 10px;
}

.server-status-panel-head {
  min-height: 60px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--server-border);
}

.server-status-panel-head span {
  color: var(--server-blue);
  font-size: 11px;
}

.server-status-panel-head h3 {
  margin: 2px 0 0;
  color: #17263a;
  font-size: 16px;
}

.server-resource-body,
.server-database-body {
  padding: 10px 18px;
}

.server-resource-horizontal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.server-resource-tile {
  min-width: 0;
  padding: 13px 0 17px;
}

.server-resource-tile > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.server-resource-tile strong,
.server-check-row strong {
  color: #27384c;
}

.server-resource-tile span,
.server-resource-foot,
.server-check-row small {
  color: var(--server-muted);
  font-size: 12px;
}

.server-resource-tile > span {
  display: block;
  margin: 7px 0 10px;
}

.server-resource-track {
  height: 5px;
  overflow: hidden;
  background: #e9eff6;
}

.server-resource-track i {
  display: block;
  height: 100%;
  background: var(--server-blue);
}

.server-resource-tile b,
.server-check-row b {
  color: #27384c;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.server-resource-foot {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 28px;
  border-top: 1px solid #edf1f5;
}

.server-core-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: .9fr 1.35fr .9fr;
  gap: 10px;
  align-items: stretch;
}

.server-core-panel {
  min-width: 0;
}

.server-core-body {
  height: 100%;
  padding: 16px 18px;
}

.server-core-heading,
.server-core-heading > div {
  display: flex;
  align-items: center;
}

.server-core-heading {
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e7edf4;
}

.server-core-heading > div {
  gap: 10px;
}

.server-core-heading small {
  color: var(--server-muted);
  font-size: 11px;
}

.server-core-heading h3 {
  margin: 2px 0 0;
  color: #17263a;
  font-size: 16px;
}

.server-core-heading b {
  color: var(--server-green);
  font-size: 13px;
}

.server-core-metrics {
  margin: 8px 0 0;
}

.server-core-metrics > div {
  min-height: 34px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edf1f5;
}

.server-core-metrics dt {
  color: var(--server-muted);
  font-size: 11px;
}

.server-core-metrics dd {
  margin: 0;
  overflow: hidden;
  color: #2d4057;
  font-size: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-core-note {
  margin-top: 12px;
  padding: 10px 11px;
  background: #f5f8fb;
}

.server-core-note span,
.server-core-note strong {
  display: block;
}

.server-core-note span {
  color: var(--server-muted);
  font-size: 11px;
}

.server-core-note strong {
  margin-top: 4px;
  overflow: hidden;
  color: #2b4059;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-core-panel > .server-core-body > .server-restart-btn {
  width: 100%;
  margin-top: 12px;
}

.server-check-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #edf1f5;
}

.server-check-row:last-child {
  border-bottom: 0;
}

.server-check-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.server-check-row small {
  max-width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-worker-focus {
  margin: 12px 0 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--server-blue);
  background: #f3f8fe;
}

.server-worker-focus.idle {
  border-left-color: var(--server-green);
  background: #f3faf6;
}

.server-worker-focus.danger {
  border-left-color: var(--server-red);
  background: #fff4f3;
}

.server-worker-focus.danger .server-worker-focus-head b {
  color: var(--server-red);
}

.server-worker-focus-head,
.server-worker-memory,
.server-worker-focus-head > div {
  display: flex;
  align-items: center;
}

.server-worker-focus-head {
  justify-content: space-between;
  gap: 12px;
}

.server-worker-focus-head > div {
  gap: 10px;
}

.server-worker-focus-head span,
.server-worker-focus > small,
.server-worker-memory span,
.server-queue-card span,
.server-queue-card small {
  color: var(--server-muted);
  font-size: 11px;
}

.server-worker-focus-head strong {
  color: #21364f;
  font-size: 14px;
}

.server-worker-focus-head b {
  color: var(--server-blue);
  font-size: 12px;
}

.server-worker-focus > small {
  display: block;
  margin-top: 6px;
}

.server-queue-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.server-queue-card {
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid #e0e8f1;
  background: #fff;
}

.server-queue-card span,
.server-queue-card strong {
  display: block;
}

.server-queue-card strong {
  margin-top: 5px;
  color: #233a56;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.server-queue-card small {
  display: inline;
  margin: 0 8px 0 2px;
  font-weight: 400;
}

.server-worker-memory {
  min-height: 54px;
  display: grid;
  grid-template-columns: 170px minmax(120px, 1fr) 44px;
  gap: 12px;
  border-top: 1px solid #edf1f5;
}

.server-worker-memory > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.server-worker-memory strong {
  color: #27384c;
  font-size: 12px;
}

.server-worker-memory b {
  color: #27384c;
  text-align: right;
}

.server-audit-panel {
  margin-top: 10px;
}

.server-control-audit {
  max-height: 260px;
  overflow: auto;
}

.server-control-audit table {
  width: 100%;
  border-collapse: collapse;
}

.server-control-audit th,
.server-control-audit td {
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid #e7edf4;
  color: #3b4b5f;
  font-size: 12px;
  text-align: left;
}

.server-control-audit th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f7fb;
  color: #5d6d81;
}

.server-audit-status {
  font-weight: 700;
}

.server-audit-status.healthy {
  color: var(--server-green);
}

.server-audit-status.danger {
  color: var(--server-red);
}

.server-audit-status.working {
  color: var(--server-blue);
}

.server-audit-empty {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--server-muted);
}

.server-status-limitations {
  margin-top: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--server-amber);
  background: #fff9ed;
  color: #75521f;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .server-status-view > * {
    width: 1180px;
    min-width: 1180px;
    max-width: 1180px;
  }

  .server-core-grid {
    grid-template-columns: 1fr;
  }
}