/* Scoped styles for the A+B fused server monitor. */
.server-monitor { width: 100%; min-width: 0; color: #172033; }
.server-monitor * { box-sizing: border-box; }
.sm-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sm-heading h2 { margin: 0; font-size: 24px; line-height: 32px; }
.sm-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-subtitle { color: #7b8494; font-size: 12px; line-height: 20px; }
.sm-metrics { margin-bottom: 4px; }
.sm-metric { height: 100%; border-top: 2px solid #dbe3ef; }
.sm-metric .ant-statistic-title { font-size: 12px; color: #667085; }
.sm-metric-detail { margin-top: 6px; color: #8a93a3; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-evidence-card { margin: 16px 0; border-left: 3px solid #b8915c; }
.sm-evidence-card .ant-card-head { min-height: 44px; }
.sm-evidence-card .ant-card-head-title { white-space: normal; padding: 10px 0; }
.sm-evidence-card .ant-card-extra { padding: 8px 0; }
.sm-evidence-line { color: #8a93a3; font-size: 12px; line-height: 20px; margin: 12px 0; }
.sm-process-table { margin-top: 4px; }
.sm-process-table .ant-table-tbody > tr:hover { background: #fff8eb; }
.sm-charts { margin-bottom: 16px; }
.sm-chart { width: 100%; height: 270px; min-width: 0; }
.sm-incidents { margin-bottom: 20px; }
.sm-incident-list { display: flex; flex-direction: column; gap: 8px; }
.sm-incident { width: 100%; min-height: 44px; display: grid; grid-template-columns: 170px minmax(160px, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; border: 1px solid #f0d8d2; border-radius: 6px; background: #fffafa; color: #5c2b2b; cursor: pointer; }
.sm-incident:hover, .sm-incident:focus { border-color: #cf1322; outline: none; }
.sm-incident-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.sm-incident-reason { color: #a33b32; }
.sm-incident-value { text-align: right; font-size: 12px; color: #8c5b55; }
.sm-process-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; background: #f6f8fa; border-radius: 6px; padding: 14px; max-height: 300px; overflow: auto; }

@media (max-width: 720px) {
  body.server-monitor-active .ant-layout-sider { display: none; }
  body.server-monitor-active .ant-layout,
  body.server-monitor-active .ant-layout-content { min-width: 0; }
  body.server-monitor-active .ant-layout-content { padding: 12px !important; }
  body.server-monitor-active .ant-layout-header { padding: 0 12px !important; }
  .server-monitor .ant-card-head-title { white-space: normal; }
  .sm-heading { flex-direction: column; gap: 10px; }
  .sm-heading h2 { font-size: 21px; }
  .sm-heading .ant-space { width: 100%; justify-content: space-between; }
  .sm-heading .ant-btn { min-height: 40px; }
  .sm-chart { height: 235px; }
  .sm-incident { grid-template-columns: 1fr; gap: 4px; }
  .sm-incident-value { text-align: left; }
  .sm-metric .ant-statistic-content { font-size: 21px; }
  .sm-metric-detail { font-size: 11px; }
  .server-monitor .ant-card-head-wrapper { flex-wrap: wrap; }
  .server-monitor .ant-card-extra { margin-left: 0; }
}

@media (max-width: 390px) {
  .sm-metric .ant-statistic-content { font-size: 19px; }
  .sm-metric .ant-statistic-content-suffix { font-size: 11px; }
}