rustio-admin 0.31.0

/* ============================================================
 * rustio-admin / pages / tools  —  history (audit), object history,
 * db browser. Generic .rio-table, audit badges, field diffs, avatar,
 * date dividers, and the db-browser schema cards.
 * ============================================================ */

/* The DS .rio-table (components/data.css, contract §9) is the single authority —
 * the history / audit / db-browser tables use it directly. An earlier competing
 * redefinition lived here (gray thead fill, mono headers) and, loading after the
 * component sheet, shadowed the §9 table globally. Removed so every .rio-table
 * renders the one contract look. */

/* The canonical .rio-pill (contract §9) lives in components/data.css — the
 * audit/history/health pages use it directly; the earlier duplicate here
 * (mono, dotted) was removed so there is one pill system. */

/* ---- Health page ---- */
.rio-health__summary { display: flex; align-items: center; gap: var(--rio-space-12); margin-block-end: var(--rio-space-16); }
.rio-health__row--error td { background: var(--rio-danger-tint); }
.rio-health__row--warn td { background: var(--rio-warn-tint); }

/* ---- Avatar + "by" ---- */
.rio-avatar { inline-size: 28px; block-size: 28px; flex: none; border-radius: var(--rio-radius-md); background: var(--rio-rust-tint); color: var(--rio-rust); display: grid; place-items: center; font-family: var(--rio-font-display); font-weight: 700; font-size: var(--rio-text-12); }
.rio-by { display: inline-flex; align-items: center; gap: var(--rio-space-8); color: var(--rio-text); text-decoration: none; }
.rio-by:hover { color: var(--rio-rust); }

/* ---- Date divider rows ---- */
.rio-history-date-divider th, tr.lx-date th {
  padding: 8px 16px !important; background: var(--rio-bg);
  font-family: var(--rio-font-body); font-size: var(--rio-text-12); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--rio-text-mute); text-align: start;
}

/* ---- Field diffs ---- */
.rio-history-diff, .lx-diff { margin: var(--rio-space-8) 0 0; display: grid; gap: 2px; }
.rio-history-diff__row, .lx-diff__row { display: flex; align-items: baseline; gap: 8px; font-size: var(--rio-text-13); }
.rio-history-diff__label, .lx-diff__label { color: var(--rio-text-faint); min-inline-size: 90px; font-family: var(--rio-font-mono); }
.rio-history-diff dd, .lx-diff dd { margin: 0; }
.rio-history-diff__old, .lx-diff__old { color: var(--rio-danger); text-decoration: line-through; }
.rio-history-diff__arrow, .lx-diff__arrow { color: var(--rio-text-faint); }
.rio-history-diff__new, .lx-diff__new { color: var(--rio-success); }

/* ---- DB browser ---- */
.rio-db-stats { display: flex; flex-wrap: wrap; gap: var(--rio-space-48); margin: 0; }
.rio-db-stat dt { font-family: var(--rio-font-body); font-weight: 700; font-size: var(--rio-text-12); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rio-text-mute); }
.rio-db-stat dd { margin: 2px 0 0; font-family: var(--rio-font-mono); font-size: var(--rio-text-30); font-weight: 500; color: var(--rio-text-hi); font-variant-numeric: lining-nums tabular-nums; }
.rio-db-table { padding: 0 !important; overflow: hidden; }
.rio-db-table__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rio-space-16); padding: var(--rio-space-16) var(--rio-space-20); border-block-end: 1px solid var(--rio-line); }
.rio-db-table__header h2 { margin: 0; font-family: var(--rio-font-mono); font-size: var(--rio-text-17); color: var(--rio-text-hi); }
.rio-db-fks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--rio-space-20); padding: var(--rio-space-20); border-block-start: 1px solid var(--rio-line); }
.rio-db-fks__group h3 { font-family: var(--rio-font-body); font-weight: 700; font-size: var(--rio-text-12); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rio-text-mute); margin: 0 0 var(--rio-space-8); }
.rio-db-fk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rio-space-6); font-size: var(--rio-text-13); }
.rio-db-fk-list a { color: var(--rio-rust); text-decoration: none; }

/* ---- Shared: inline <code> inside a masthead lead paragraph ---- */
.rio-masthead-desc code { font-family: var(--rio-font-mono); font-size: 0.92em; background: var(--rio-surface-2); padding: 1px 6px; border-radius: var(--rio-radius-sm); }

/* ---- Audit log (log_entries) cell helpers — replaces inline styles ---- */
.rio-table-scroll { overflow: auto; }
.rio-hist-when { white-space: nowrap; color: var(--rio-text-mute); }
.rio-hist-ip { font-family: var(--rio-font-mono); font-size: var(--rio-text-12); color: var(--rio-text-faint); }

/* ---- API surface (apis_index) — moved out of the template's inline <style> ---- */
.rio-api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--rio-s5); }
.rio-api-card { background: var(--rio-surface); border: 1px solid var(--rio-border); border-radius: var(--rio-radius-lg); box-shadow: var(--rio-shadow); overflow: hidden; }
.rio-api-card__head { display: flex; align-items: center; gap: var(--rio-s3); padding: var(--rio-s4) var(--rio-s5); border-bottom: 1px solid var(--rio-border-soft); }
.rio-api-card__glyph { width: 38px; height: 38px; flex: none; border-radius: var(--rio-radius-sm); display: grid; place-items: center; background: var(--rio-accent2-soft, var(--rio-accent-soft)); color: var(--rio-accent2-ink, var(--rio-accent)); }
.rio-api-card__glyph .rio-icon { width: 18px; height: 18px; }
.rio-api-card__title { font-size: var(--rio-fs-lg); font-weight: var(--rio-fw-bold); color: var(--rio-text-strong); }
.rio-api-card__title a { color: inherit; }
.rio-api-card__title a:hover { color: var(--rio-accent); }
.rio-api-card__sub { font-weight: var(--rio-fw-regular); color: var(--rio-text-subtle); font-size: var(--rio-fs-sm); }
.rio-api-card__count { margin-left: auto; font-size: var(--rio-fs-xs); font-weight: var(--rio-fw-semibold); color: var(--rio-text-muted); }
.rio-api-endpoints { display: flex; flex-direction: column; }
.rio-api-ep { display: flex; align-items: center; gap: var(--rio-s3); padding: var(--rio-s3) var(--rio-s5); border-bottom: 1px solid var(--rio-border-soft); }
.rio-api-verb { flex: none; min-width: 52px; text-align: center; font-family: var(--rio-font-mono); font-size: var(--rio-fs-xs); font-weight: var(--rio-fw-bold); letter-spacing: 0.03em; padding: 0.18rem 0.5rem; border-radius: var(--rio-radius-sm); }
.rio-api-verb--get { background: var(--rio-success-bg); color: var(--rio-success); }
.rio-api-verb--post { background: var(--rio-accent2-soft, var(--rio-accent-soft)); color: var(--rio-accent2-ink, var(--rio-accent)); }
.rio-api-verb--del { background: var(--rio-danger-bg); color: var(--rio-danger); }
.rio-api-path { font-family: var(--rio-font-mono); font-size: var(--rio-fs-sm); color: var(--rio-text); overflow-x: auto; }
.rio-api-ep__action { margin-left: auto; flex: none; font-size: var(--rio-fs-xs); color: var(--rio-text-subtle); }
.rio-api-fields { padding: var(--rio-s4) var(--rio-s5) var(--rio-s5); }
.rio-api-fields__label { font-size: var(--rio-fs-xs); font-weight: var(--rio-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--rio-text-subtle); margin-bottom: var(--rio-s3); }
.rio-api-ftable { width: 100%; border-collapse: collapse; font-size: var(--rio-fs-sm); }
.rio-api-ftable td { padding: 0.45rem 0; border-bottom: 1px solid var(--rio-border-soft); }
.rio-api-ftable tr:last-child td { border-bottom: 0; }
.rio-api-ftable .rio-api-fname { font-family: var(--rio-font-mono); color: var(--rio-text); }
.rio-api-ftable .rio-api-ftype { color: var(--rio-text-muted); }
.rio-api-ftable .rio-api-fnull { text-align: right; color: var(--rio-text-subtle); font-size: var(--rio-fs-xs); }
.rio-api-fnull--yes { color: var(--rio-warning); font-weight: var(--rio-fw-semibold); }
@media (max-width: 720px) { .rio-api-grid { grid-template-columns: 1fr; } }

/* ---- Docs index (docs_index) — moved out of the template's inline <style> ---- */
.rio-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--rio-s4); }
.rio-doc-card { display: flex; align-items: center; gap: var(--rio-s4); padding: var(--rio-s5); background: var(--rio-surface); border: 1px solid var(--rio-border); border-radius: var(--rio-radius-lg); box-shadow: var(--rio-shadow); transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.rio-doc-card:hover { border-color: var(--rio-accent); transform: translateY(-2px); box-shadow: var(--rio-shadow-lg); }
.rio-doc-card__glyph { width: 46px; height: 46px; flex: none; border-radius: var(--rio-radius-lg); display: grid; place-items: center; background: var(--rio-accent2-soft, var(--rio-accent-soft)); color: var(--rio-accent2-ink, var(--rio-accent)); }
.rio-doc-card__glyph .rio-icon { width: 22px; height: 22px; }
.rio-doc-card__body { min-width: 0; display: flex; flex-direction: column; }
.rio-doc-card__title { font-size: var(--rio-fs-lg); font-weight: var(--rio-fw-bold); color: var(--rio-text-strong); transition: color .14s ease; }
.rio-doc-card:hover .rio-doc-card__title { color: var(--rio-accent); }
.rio-doc-card__path { margin-top: 2px; font-family: var(--rio-font-mono); font-size: var(--rio-fs-xs); color: var(--rio-text-muted); }
.rio-doc-card__arrow { margin-left: auto; flex: none; font-size: 1.25rem; color: var(--rio-text-subtle); transition: transform .14s ease, color .14s ease; }
.rio-doc-card:hover .rio-doc-card__arrow { transform: translateX(3px); color: var(--rio-accent); }

/* ---- Doc page viewer (doc_page) — moved out of the template's inline <style> ---- */
.rio-docpage-card { background: var(--rio-surface); border: 1px solid var(--rio-border); border-radius: var(--rio-radius-lg); box-shadow: var(--rio-shadow); padding: var(--rio-s6); }
.rio-doc-prose { max-width: 80ch; color: var(--rio-text); font-size: var(--rio-fs-base); line-height: 1.7; }
.rio-doc-prose > :first-child { margin-top: 0; }
/* the markdown's own leading title duplicates the page header → drop it */
.rio-doc-prose > h1:first-child { display: none; }
.rio-doc-prose h1 { font-size: var(--rio-fs-h2); font-weight: var(--rio-fw-bold); color: var(--rio-text-strong); margin: var(--rio-s6) 0 var(--rio-s3); }
.rio-doc-prose h2 { font-size: var(--rio-fs-h2); font-weight: var(--rio-fw-bold); color: var(--rio-text-strong); margin: var(--rio-s6) 0 var(--rio-s3); padding-bottom: var(--rio-s2); border-bottom: 1px solid var(--rio-border-soft); }
.rio-doc-prose h3 { font-size: var(--rio-fs-lg); font-weight: var(--rio-fw-bold); color: var(--rio-text-strong); margin: var(--rio-s5) 0 var(--rio-s2); }
.rio-doc-prose h4 { font-size: var(--rio-fs-md); font-weight: var(--rio-fw-bold); color: var(--rio-text-strong); margin: var(--rio-s4) 0 var(--rio-s2); }
.rio-doc-prose p { margin: 0 0 var(--rio-s4); }
.rio-doc-prose strong { font-weight: var(--rio-fw-bold); color: var(--rio-text-strong); }
.rio-doc-prose a { color: var(--rio-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--rio-accent) 35%, transparent); text-underline-offset: 2px; }
.rio-doc-prose a:hover { color: var(--rio-accent2-ink, var(--rio-accent)); text-decoration-color: currentColor; }
.rio-doc-prose ul, .rio-doc-prose ol { margin: 0 0 var(--rio-s4); padding-left: 1.4em; }
.rio-doc-prose li { margin: 0.3em 0; }
.rio-doc-prose li::marker { color: var(--rio-accent2-ink, var(--rio-text-subtle)); }
.rio-doc-prose :not(pre) > code { font-family: var(--rio-font-mono); font-size: 0.88em; background: var(--rio-surface-2); color: var(--rio-text-strong); padding: 0.12em 0.42em; border-radius: var(--rio-radius-sm); border: 1px solid var(--rio-border-soft); }
.rio-doc-prose pre { margin: 0 0 var(--rio-s4); padding: var(--rio-s4) var(--rio-s5); background: var(--rio-surface-chrome); border-radius: var(--rio-radius); overflow-x: auto; }
.rio-doc-prose pre code { font-family: var(--rio-font-mono); font-size: 0.86em; line-height: 1.65; color: var(--rio-on-solid); }
.rio-doc-prose table { width: 100%; border-collapse: collapse; margin: 0 0 var(--rio-s4); font-size: var(--rio-fs-sm); }
.rio-doc-prose thead th { text-align: left; background: var(--rio-surface-2); color: var(--rio-text-muted); font-size: var(--rio-fs-xs); font-weight: var(--rio-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--rio-s2) var(--rio-s3); border-bottom: 1px solid var(--rio-border); }
.rio-doc-prose tbody td { padding: var(--rio-s2) var(--rio-s3); border-bottom: 1px solid var(--rio-border-soft); vertical-align: top; }
.rio-doc-prose tbody tr:last-child td { border-bottom: 0; }
.rio-doc-prose blockquote { margin: 0 0 var(--rio-s4); padding: var(--rio-s3) var(--rio-s4); border-left: 3px solid var(--rio-accent2, var(--rio-accent)); background: var(--rio-accent2-soft, var(--rio-accent-soft)); border-radius: 0 var(--rio-radius-sm) var(--rio-radius-sm) 0; color: var(--rio-text-muted); }
.rio-doc-prose blockquote p:last-child { margin-bottom: 0; }
.rio-doc-prose hr { border: 0; border-top: 1px solid var(--rio-border); margin: var(--rio-s6) 0; }
.rio-doc-prose img { max-width: 100%; height: auto; border-radius: var(--rio-radius); }
.rio-doc-foot { margin-top: var(--rio-s5); }
.rio-doc-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--rio-accent2-ink, var(--rio-accent)); font-weight: var(--rio-fw-semibold); font-size: var(--rio-fs-sm); }
.rio-doc-back:hover { color: var(--rio-accent2, var(--rio-accent)); }