/* ============================================================
   JSON viewer styles (collapsible tree + raw + search + copy).
   Lifted from tools/dashboard/job/index.html so /shared/viewer.js
   can be reused across views. Dark-mode overrides for these
   classes already live in tokens.css.
   ============================================================ */

.json-viewer { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.jv-tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fbfcfe; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.jv-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 7px; overflow: hidden; }
.jv-seg button { background: #fff; border: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 4px 11px; cursor: pointer; }
.jv-seg button + button { border-left: 1px solid var(--border); }
.jv-seg button.active { background: var(--brand-blue-light); color: var(--brand-blue-dark); }
.jv-search { flex: 1 1 160px; min-width: 120px; font: inherit; font-size: 12px; padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 7px; }
.jv-search.hidden { display: none; }
.jv-body { max-height: 520px; overflow: auto; padding: 12px 14px; }

.json-tree { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; }
.jt-node { padding-left: 14px; }
.jt-node.jt-root { padding-left: 0; }
.jt-bar { cursor: pointer; user-select: none; white-space: pre-wrap; }
.jt-bar:hover > .jt-key, .jt-bar:hover > .jt-summary { text-decoration: underline; }
.jt-caret { display: inline-block; width: 12px; color: var(--text-muted); transition: transform 0.12s ease; }
.jt-node.open > .jt-bar > .jt-caret { transform: rotate(90deg); }
.jt-children { display: none; }
.jt-node.open > .jt-children { display: block; }
.jt-key { color: var(--indigo); }
.jt-key.dim { color: var(--charcoal-soft); }
.jt-summary { color: var(--text-muted); }
.jt-leaf { padding-left: 14px; white-space: pre-wrap; }
.jt-v-string { color: #0a7a57; }
.jt-v-number { color: #b9770b; }
.jt-v-boolean { color: var(--brand-blue-dark); font-weight: 700; }
.jt-v-null { color: var(--text-muted); font-style: italic; }
.jt-colon { color: var(--text-muted); }

.raw-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre; margin: 0; }
.raw-json .ln { color: #64748b; user-select: none; margin-right: 14px; }
.raw-json .ln-gap { color: #475569; }
.raw-json mark { background: #fde047; color: #0f172a; border-radius: 2px; padding: 0 1px; }