/* IT & Audit · Error Monitor
   Live error stream UI — matches Prime RP look (Bootstrap 5.3 + --ax-* tokens).
*/

#errorMonitor {
  --em-fatal:   #b91c1c;
  --em-error:   #dc3545;
  --em-warning: #fd7e14;
  --em-info:    #0d6efd;
}

#errorMonitor .em-filter-card { background: var(--ax-card, #fff); border-color: var(--ax-border, #e5e7eb); }
#errorMonitor .em-kpi-label   { color: var(--ax-muted, #6b7280); font-weight: 500; }

#errorMonitor .em-group {
  background: var(--ax-card, #fff);
  border-color: var(--ax-border, #e5e7eb);
  transition: border-color .15s ease;
}
#errorMonitor .em-group[data-sev="fatal"]   { border-left: 3px solid var(--em-fatal); }
#errorMonitor .em-group[data-sev="error"]   { border-left: 3px solid var(--em-error); }
#errorMonitor .em-group[data-sev="warning"] { border-left: 3px solid var(--em-warning); }
#errorMonitor .em-group[data-sev="info"]    { border-left: 3px solid var(--em-info); }

#errorMonitor .em-sev-badge { padding-top: 2px; }
#errorMonitor .em-sev {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem;
}
#errorMonitor .em-sev.fatal   { background: rgba(185,28,28,.12); color: var(--em-fatal); }
#errorMonitor .em-sev.error   { background: rgba(220,53,69,.12); color: var(--em-error); }
#errorMonitor .em-sev.warning { background: rgba(253,126,20,.12); color: var(--em-warning); }
#errorMonitor .em-sev.info    { background: rgba(13,110,253,.12); color: var(--em-info); }

#errorMonitor .em-source            { font-weight: 500; }
#errorMonitor .em-source.s-web      { background: rgba(13,110,253,.12); color: #0d6efd; }
#errorMonitor .em-source.s-flutter  { background: rgba(2,136,209,.12); color: #0288d1; }
#errorMonitor .em-source.s-crashlytics { background: rgba(214,51,132,.12); color: #d63384; }

#errorMonitor .em-target { word-break: break-all; }
#errorMonitor .em-occurs { color: var(--ax-muted, #6b7280); font-weight: 500; }
#errorMonitor .em-last   { color: var(--ax-muted, #6b7280); }

#errorMonitor .em-detail-inner {
  background: var(--ax-soft, #f1f5f9);
  border: 1px solid var(--ax-border, #e5e7eb);
  border-radius: 8px;
  padding: 14px;
}

#errorMonitor .em-section-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ax-muted, #6b7280);
  font-weight: 700;
  margin-bottom: 4px;
}

#errorMonitor .em-kv th {
  width: 110px;
  font-size: .75rem;
  color: var(--ax-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  padding-right: 8px;
  padding-bottom: 4px;
  vertical-align: top;
}
#errorMonitor .em-kv td { font-size: .85rem; padding-bottom: 4px; }

#errorMonitor .em-stack {
  background: var(--ax-card, #fff);
  border: 1px solid var(--ax-border, #e5e7eb);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .75rem;
  font-family: ui-monospace, monospace;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

#errorMonitor .em-crumbs {
  background: var(--ax-card, #fff);
  border: 1px solid var(--ax-border, #e5e7eb);
  border-radius: 6px;
  padding: 8px;
  max-height: 160px;
  overflow: auto;
  font-size: .75rem;
}
#errorMonitor .em-crumbs .em-crumb {
  display: grid; grid-template-columns: 80px 80px 1fr; gap: 6px;
  padding: 2px 0;
  font-family: ui-monospace, monospace;
}
#errorMonitor .em-crumbs .em-crumb .ts   { color: var(--ax-muted, #6b7280); }
#errorMonitor .em-crumbs .em-crumb .type { font-weight: 600; color: #495057; }

#errorMonitor .em-occurs-list li {
  padding: 4px 6px;
  border-bottom: 1px dashed var(--ax-border, #e5e7eb);
  font-family: ui-monospace, monospace;
  font-size: .72rem;
  color: var(--ax-muted, #6b7280);
  display: grid; grid-template-columns: 130px 1fr 80px; gap: 6px;
}
#errorMonitor .em-occurs-list li:last-child { border-bottom: 0; }

html[data-theme="dark"] #errorMonitor .em-group,
html[data-theme="dark"] #errorMonitor .em-filter-card,
html[data-theme="dark"] #errorMonitor .em-stack,
html[data-theme="dark"] #errorMonitor .em-crumbs {
  background: var(--ax-card, #111a2b);
  color: #e5e7eb;
}
html[data-theme="dark"] #errorMonitor .em-detail-inner {
  background: var(--ax-input, #0b1220);
}