/* Operations Monitor */

.monitor-hero {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.monitor-hero .content {
  padding: 42px 0 32px;
}

.monitor-section {
  padding: 32px 0 40px;
}

.monitor-section--alt {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.monitor-grid,
.monitor-chart-grid,
.monitor-log-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.monitor-chart-grid--wide,
.monitor-log-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monitor-card,
.monitor-chart,
.monitor-log-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 18px;
}

.monitor-card__header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
}

.monitor-card__header h2,
.monitor-chart h3,
.monitor-log-panel h3 {
  margin-bottom: 0;
}

.monitor-status {
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 900;
}

.monitor-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.monitor-table {
  background: var(--surface);
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 1120px;
  width: 100%;
}

.monitor-table th,
.monitor-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: right;
  white-space: nowrap;
}

.monitor-table th:first-child,
.monitor-table td:first-child,
.monitor-table td:nth-child(2) {
  text-align: left;
}

.monitor-table thead th {
  background: #f7f6ef;
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.monitor-table tbody th {
  color: var(--ink);
  font-weight: 900;
}

.monitor-table tr.is-stale {
  background: #fff8ee;
}

.monitor-warning {
  color: #a34000;
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.monitor-metric-groups {
  display: grid;
  gap: 16px;
}

.monitor-metric-group {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.monitor-metric-group h3 {
  color: var(--ink);
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.monitor-metric-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.monitor-metric-list div {
  align-items: baseline;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.monitor-metric-list dt,
.monitor-last span,
.monitor-last small,
.monitor-chart p,
.monitor-empty,
.monitor-log-list time,
.monitor-log-list small {
  color: var(--muted);
  font-size: 0.82rem;
}

.monitor-metric-list dd {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.monitor-last {
  border-top: 1px solid var(--line);
  margin-bottom: 0;
  padding-top: 12px;
}

.monitor-last + .monitor-last {
  margin-top: 12px;
}

.monitor-last strong,
.monitor-last small {
  display: block;
  overflow-wrap: anywhere;
}

.monitor-chart svg {
  background: #fbfbf8;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: block;
  height: auto;
  margin-top: 12px;
  width: 100%;
}

.monitor-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.monitor-axis {
  stroke: #a8b5ae;
  stroke-width: 1.3;
}

.monitor-grid-line {
  stroke: #d7ded9;
  stroke-dasharray: 6 8;
  stroke-width: 1;
}

.monitor-axis-label {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.monitor-axis-label--time {
  font-size: 12px;
}

.monitor-line--github,
.legend--github {
  stroke: var(--accent);
  background: var(--accent);
}

.monitor-line--gitlab,
.legend--gitlab {
  stroke: var(--accent-strong);
  background: var(--accent-strong);
}

.monitor-line--codeberg,
.legend--codeberg {
  stroke: #2563eb;
  background: #2563eb;
}

.legend {
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  margin: 0 5px 0 10px;
  width: 10px;
}

.monitor-log-grid {
  margin-top: 16px;
}

.monitor-log-panel {
  max-height: 520px;
  overflow: auto;
}

.monitor-log-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.monitor-log-list li {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 10px;
}

.monitor-log-list strong,
.monitor-log-list span,
.monitor-log-list small {
  overflow-wrap: anywhere;
}

.monitor-log-list span {
  color: var(--ink);
  font-weight: 800;
}

.monitor-log-list--errors li {
  border-top-color: #f1c2aa;
}