/* Error log — js/errorlog.js
   The admin-only viewer for what is actually breaking in production. Modelled
   on the Storage & health panel (css/features/storage.css): same modal shell,
   same button/row vocabulary, so an admin surface never feels bolted on.

   No z-index here on purpose — the modal lives in #modal-layer, which already
   sits below #popover-layer. A feature that sets its own z-index is how the
   "/ menu invisible on shared pages" bug happened. */

.errorlog-modal { width: min(820px, 96vw); max-height: 88vh; display: flex; flex-direction: column; }
.errorlog-body { padding: 4px 22px 20px; overflow: auto; }

.errorlog-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 14px;
}
.errorlog-bar .settings-input { width: auto; min-width: 150px; }
.errorlog-note {
  font-size: 11.5px; color: var(--text-faint); line-height: 1.5;
  flex: 1; min-width: 220px;
}

.errorlog-btn {
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font: inherit; font-size: 12.5px; padding: 7px 13px;
  border-radius: var(--radius-ctl, 7px); cursor: pointer; white-space: nowrap;
}
.errorlog-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); }
.errorlog-btn:disabled { opacity: 0.5; cursor: default; }

.errorlog-list { display: flex; flex-direction: column; gap: 2px; }

.errorlog-row { border-radius: 8px; }
.errorlog-row + .errorlog-row { border-top: 1px solid var(--border); }
.errorlog-row-head {
  display: grid; grid-template-columns: 46px 1fr 120px 70px;
  align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.errorlog-row-head:hover { background: var(--bg-hover); }
.errorlog-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.errorlog-open > .errorlog-row-head { background: var(--bg-hover); }

.errorlog-count {
  font-size: 11.5px; font-weight: 600; text-align: center;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(212, 76, 71, 0.12); color: var(--danger, #d44c47);
  font-variant-numeric: tabular-nums;
}
.errorlog-msg {
  font-size: 13px; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.errorlog-meta {
  font-size: 11.5px; color: var(--text-light); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.errorlog-when { font-size: 11.5px; color: var(--text-faint); text-align: right; }

.errorlog-stack {
  margin: 0 10px 8px; padding: 11px 13px;
  background: var(--bg-input); border-radius: 9px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px; line-height: 1.6; color: var(--text-light);
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow: auto;
}
.errorlog-facts {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 10px 12px; font-size: 11px; color: var(--text-faint);
}
.errorlog-facts > span {
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.errorlog-fp { font-family: var(--font-mono, ui-monospace, monospace); }

.errorlog-empty { font-size: 13px; color: var(--text-faint); padding: 18px 4px; line-height: 1.6; }
.errorlog-error { color: var(--danger, #d44c47); }

@media (max-width: 620px) {
  .errorlog-row-head { grid-template-columns: 40px 1fr 60px; }
  .errorlog-meta { display: none; }
}