/* Strictly scoped to service detail; no service-signal or chart selectors. */
#service .detail-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 6px;
}
#service .detail-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8796aa;
}
#service .detail-status.normal i {
  background: #208148;
}
#service .detail-status.attention i {
  background: #d99524;
}
#service .detail-status.critical i {
  background: #dc4545;
}
#service .detail-analysis-meta {
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  margin-top: 4px;
}
#service .service-agent-card .service-card-title > div {
  min-width: 0;
}
#service .service-agent-card .service-card-title h2 {
  white-space: nowrap;
  font-size: 15px;
}
#service .detail-context {
  font-size: 11px;
  line-height: 1.4;
}
#service .detail-context summary {
  color: #215ca6;
  cursor: pointer;
}
#service .detail-context dl {
  margin-top: 10px;
}
#service .detail-context dd {
  margin: 0 0 8px;
}
#service .detail-console {
  background: #0d1829;
  color: #eef3fa;
  border: 1px solid #23344c;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  height: 100%;
  overflow: hidden;
}
#service .detail-console header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #24354c;
  flex-shrink: 0;
}
#service .detail-console h2 {
  color: #eef3fa;
  font-size: 16px;
  margin: 0;
}
#service .detail-console header p {
  color: #9aabc0;
  font-size: 11px;
  margin: 6px 0 0;
}
#service .detail-live {
  font-size: 11px;
  color: #a7c6ea;
  white-space: nowrap;
}
#service .detail-log-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 18px;
  flex-shrink: 0;
}
#service .detail-log-controls button,
#service .detail-log-controls select,
#service .detail-log-controls input[type="search"] {
  background: #15273e;
  color: #eef3fa;
  border: 1px solid #3e536e;
  border-radius: 6px;
  padding: 7px;
  font-size: 11px;
  max-width: 100%;
}
#service .detail-log-controls label {
  font-size: 11px;
  color: #b8c6d8;
  display: flex;
  gap: 6px;
  align-items: center;
}
#service .detail-log-count {
  color: #9aabc0;
  font-size: 11px;
  padding: 0 18px;
  margin: 0 0 8px;
}
#service .detail-log-lines {
  overflow: auto;
  flex: 1;
  min-height: 160px;
  overscroll-behavior: contain;
}
#service .detail-log-row {
  display: grid;
  grid-template-columns: 76px 100px minmax(0, 1fr);
  width: 100%;
  gap: 12px;
  text-align: left;
  padding: 12px 18px;
  border: 0;
  border-top: 1px solid #203047;
  border-radius: 0;
  background: transparent;
  color: #eef3fa;
  font-size: 12px;
  line-height: 1.5;
}
#service .detail-log-row:hover {
  background: #182b44;
}
#service .detail-log-row time,
#service .detail-event-type {
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
#service .detail-log-row time {
  color: #a3b4cc;
}
#service .detail-log-row small {
  display: block;
  color: #94a7c0;
  font-size: 10px;
  margin-top: 4px;
}
#service .detail-event-type {
  color: #89bafa;
}
#service .attention .detail-event-type {
  color: #f4c36c;
}
#service .critical .detail-event-type {
  color: #ff9696;
}
#service .recovered .detail-event-type {
  color: #81dfaa;
}
#service .neutral .detail-event-type {
  color: #b5becc;
}
#service .detail-evidence {
  color: #96c4ff;
  text-decoration: underline;
}
#service .detail-log-empty {
  padding: 20px;
  color: #b8c6d8;
}
#service .detail-raw {
  margin-top: 12px;
  font-size: 12px;
  padding: 12px;
  border: 1px solid #dfe7f0;
  border-radius: 8px;
}
#service .detail-raw .panel {
  margin-top: 12px;
}
#service .detail-raw summary {
  cursor: pointer;
}
#service #service-pane-activity {
  padding-bottom: 4px;
}
#service .detail-console {
  height: calc(100% - 50px);
}
@media (max-width: 650px) {
  #service .detail-console {
    height: 600px;
  }
  #service .detail-console header {
    flex-direction: column;
  }
  #service .detail-log-row {
    grid-template-columns: 76px 1fr;
    gap: 6px;
  }
  #service .detail-log-row > span:last-child {
    grid-column: 1/-1;
    overflow-wrap: anywhere;
  }
  #service .service-agent-card .service-card-title h2 {
    font-size: 14px;
  }
}
#service .detail-analysis-meta {
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
}
#drawer.service-event-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: min(520px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 12px 0 0 12px;
  overflow: auto;
}
#drawer.service-event-drawer pre {
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}