.nav-badge {
  float: right;
  min-width: 19px;
  padding: 2px 5px;
  border-radius: 10px;
  background: #db4d59;
  color: #fff;
  font-size: 9px;
  text-align: center;
}

.error-controls {
  display: flex;
  gap: 9px;
}

.error-controls select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
}

.error-metrics {
  display: grid;
  grid-template-columns: 170px 170px 1fr;
  gap: 12px;
  margin-bottom: 15px;
}

.error-metrics article { padding: 17px; }
.error-metrics small { display: block; color: #84999e; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.error-metrics strong { display: block; margin-top: 5px; font-size: 25px; }
.error-info { display: flex; flex-direction: column; justify-content: center; background: #eff8f4; }
.error-info b { font-size: 12px; color: #17715a; }
.error-info span { margin-top: 4px; font-size: 10px; color: #6f888e; }
.error-panel { min-height: 350px; }

.error-entry {
  border-top: 1px solid #e8eeee;
  padding: 0 18px;
}

.error-entry:first-child { border-top: 0; }
.error-entry summary { list-style: none; cursor: pointer; padding: 16px 0; }
.error-entry summary::-webkit-details-marker { display: none; }
.error-summary { display: grid; grid-template-columns: 90px minmax(180px, 1fr) 155px auto; align-items: center; gap: 12px; }
.error-level { width: max-content; border-radius: 5px; padding: 4px 7px; background: #fbe5e7; color: #b63744; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.error-entry.resolved .error-level { background: #e7efed; color: #6e8388; }
.error-message strong { display: block; font-size: 11px; }
.error-message small { display: block; margin-top: 4px; color: #84999e; }
.error-time { color: #71898e; font-size: 10px; }
.error-resolve { border: 1px solid #d8e4e2; background: #fff; border-radius: 7px; padding: 7px 9px; color: #0b8065; font-size: 10px; font-weight: 800; }
.error-details { margin: 0 0 17px 102px; }
.error-context { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 9px; color: #6f858a; font-size: 10px; }
.error-details pre { max-height: 320px; overflow: auto; margin: 0; padding: 14px; border-radius: 9px; background: var(--navy); color: #b7dfd3; font-size: 10px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 720px) {
  .sidebar .nav-item.hidden { display: none !important; }
  .error-controls { flex-direction: column; }
  .error-metrics { grid-template-columns: 1fr 1fr; }
  .error-info { grid-column: 1 / -1; }
  .error-summary { grid-template-columns: auto 1fr; }
  .error-time { grid-column: 2; }
  .error-resolve { grid-column: 2; width: max-content; }
  .error-details { margin-left: 0; }
}