/* ==== Administration > Logs (/admin/logs): the platform logs, warnings and errors of every OneStop process (lg-) ====
   Same look as the rest of OneStop (app.css: toolbar, subtab, panel, table, status, notice). Loaded by
   Components\App.razor for every page, after app.css. Page: TTech.Platform.Client\Apps\Admin\LogsPage.razor. Only the
   tokens of app.css: the dark theme needs nothing here. Class built in code: lg-warning (LogsPage.LevelClass). */
.lg-search { max-width: 280px; }
/* A chosen level or source: the quiet chips of the filters look chosen too (app.css .subtab.quiet would hide it) */
.lg-filters .subtab.quiet.active { background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.lg-sources { margin-top: 6px; }
.lg-notice { margin-top: 10px; background: var(--warn-soft); color: var(--warn); }
.lg-sources + .lg-notice, .lg-notice + .panel, .lg-sources + .panel { margin-top: 12px; }

.status.lg-warning { background: var(--warn-soft); color: var(--warn); }

.lg-table .lg-row { cursor: pointer; }
.lg-table .lg-row:hover, .lg-table .lg-row:focus-visible { background: var(--panel-2); outline: none; }
.lg-table .lg-row.open { background: var(--panel-2); }
.lg-message { min-width: 280px; overflow-wrap: anywhere; }
.lg-request { max-width: 260px; overflow-wrap: anywhere; font-size: 0.82rem; color: var(--muted); }

.lg-detail > td { background: var(--panel-2); }
.lg-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 4px 0 10px; font-size: 0.85rem; }
.lg-facts dt { color: var(--muted); font-weight: 700; }
.lg-facts dd { margin: 0; overflow-wrap: anywhere; }
.lg-heading { margin: 12px 0 6px; font-size: 0.9rem; }
.lg-text {
  max-height: 360px;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--code-bg);
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lg-exception { max-height: 480px; }
.lg-more { margin-top: 10px; }

/* Phones: the facts one under the other */
@media (max-width: 700px) {
  .lg-facts { grid-template-columns: 1fr; }
  .lg-search { max-width: none; width: 100%; }
}