/* Styling for the admin Codex run detail page (admin/agent_runs#show). */

.run-title { margin: 0 0 0.35rem; }
.run-subtitle { color: #666; }
.muted { color: #666; }
.artifact-list { margin: 0; padding-left: 1.25rem; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-actions { display: flex; align-items: flex-start; gap: 0.5rem; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1.5rem; }
.detail { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 0.9rem; }
.detail .label { color: #666; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.25rem; }
.detail .value { word-break: break-word; }
.panel { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 0.9rem; margin-bottom: 1rem; font-size: 0.85rem; line-height: 1.45; }
.panel p { margin: 0.4rem 0; }
.panel p:first-child { margin-top: 0; }
.panel pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; margin: 0.4rem 0 0; padding: 0.6rem 0.7rem; background: #f7f7f7; border-radius: 6px; color: #333; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; }

.badge { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.12rem 0.45rem; border-radius: 999px; border: 1px solid transparent; }
.badge-ok { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.badge-fail { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.badge-warn { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.badge-pending { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.badge-neutral { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }

/* Failure callout: reuse the status colour so the panel matches the badge. */
.panel-heading { margin-top: 0; font-weight: 700; }
.panel-fail { background: #fef2f2; border-color: #fecaca; }
.panel-fail .panel-heading { color: #991b1b; }
.panel-warn { background: #fff7ed; border-color: #fed7aa; }
.panel-warn .panel-heading { color: #9a3412; }

.continue-prompt { width: 100%; box-sizing: border-box; margin: 0.5rem 0 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; font-size: 0.85rem; resize: vertical; }

/* Event timeline */
.timeline { display: flex; flex-direction: column; gap: 0.6rem; }
.ev { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 0.7rem 0.85rem; }
.ev-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; color: #333; flex-wrap: wrap; }
.ev-icon { font-size: 0.85rem; }
.ev-time { margin-left: auto; color: #999; font-weight: 400; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ev-exit { color: #991b1b; font-size: 0.75rem; font-weight: 600; }
.ev-dim { color: #888; font-weight: 400; }
.ev-text { font-size: 0.88rem; color: #1a1a1a; line-height: 1.45; }
.ev-text p { margin: 0.4rem 0; }
.ev-text p:first-child { margin-top: 0.45rem; }
.ev pre { white-space: pre-wrap; word-break: break-word; margin: 0.45rem 0 0; font-size: 0.78rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ev-cmd { background: #1a1a1a; color: #e5e5e5; padding: 0.5rem 0.65rem; border-radius: 6px; }
.ev-output { background: #f7f7f7; color: #333; padding: 0.5rem 0.65rem; border-radius: 6px; max-height: 22rem; overflow: auto; }
.ev-error-text { background: #fef2f2; color: #991b1b; }
.ev-message { border-left: 3px solid #1a1a1a; }
.ev-error { border-left: 3px solid #b91c1c; }
.ev-reasoning { border-left: 3px solid #c4b5fd; }
.ev-reasoning .ev-text { color: #555; font-style: italic; }
.ev-usage { background: transparent; border: none; padding: 0.2rem 0; font-size: 0.78rem; color: #888; display: flex; align-items: center; gap: 0.5rem; }
.ev-tokens { font-variant-numeric: tabular-nums; }
.ev-lifecycle { background: transparent; border: none; padding: 0.1rem 0.85rem; font-size: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.ev-lifecycle code { font-size: 0.72rem; color: #888; }

.raw-events { margin-top: 1rem; }
.raw-events summary { cursor: pointer; font-size: 0.82rem; color: #666; }
.raw-events pre { white-space: pre-wrap; word-break: break-word; font-size: 0.75rem; background: #f7f7f7; padding: 0.75rem; border-radius: 6px; margin-top: 0.5rem; }

@media (max-width: 760px) {
  .detail-grid { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
}