/* dashboard.css — in-app dashboard panel for x.dev.bos.pro (Model Router / Architecture
   / Compare / Goals tabs). Everything is scoped under #dashboard so it never clashes with
   the chat surface (styles.css). The models.dev.bos.pro design tokens are redefined here
   because the chat surface uses different token names (--bg-elev/--text/--border). */

/* Toggle: .app is display:grid, which overrides the [hidden] attribute — force it off. */
.app[hidden] { display: none !important; }

#dashboard {
  --bg: #0c0d12; --panel: #14161f; --panel2: #181b26; --line: #232636;
  --txt: #e7e9f3; --muted: #8b90a6; --dim: #5a5f74; --accent: #6d5cff;
  --ok: #3fb27f; --warn: #d9a441; --err: #e0556b;
  flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); color: var(--txt);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
#dashboard .dash-wrap { max-width: 1140px; margin: 0 auto; padding: 24px 22px 60px; }

#dashboard .btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 8px 14px;
  font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
#dashboard .btn--ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }

#dashboard .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
#dashboard .stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
#dashboard .stat__v { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
#dashboard .stat__k { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

#dashboard .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 6px 4px 4px; margin-bottom: 20px; overflow: hidden; }
#dashboard .panel__h { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 18px 6px; }
#dashboard .panel__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 14px; }

#dashboard .tablewrap { overflow-x: auto; }
#dashboard .t { width: 100%; border-collapse: collapse; font-size: .86rem; }
#dashboard .t thead th { text-align: left; color: var(--dim); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
#dashboard .t tbody td { padding: 10px 14px; border-bottom: 1px solid var(--panel2); vertical-align: top; }
#dashboard .t tbody tr:hover { background: var(--panel2); }
#dashboard .t tbody tr:last-child td { border-bottom: 0; }
#dashboard .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#dashboard .dim { color: var(--dim); }
#dashboard .muted { color: var(--muted); }
#dashboard td.muted { text-align: center; padding: 22px; }
#dashboard .ok { color: var(--ok); }
#dashboard .err { color: var(--err); }
#dashboard .prompt { color: var(--muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard .link { color: var(--accent); text-decoration: none; font-weight: 600; }
#dashboard .link:hover { text-decoration: underline; }

#dashboard .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
#dashboard .pill--ok { background: rgba(63,178,127,.16); color: var(--ok); }
#dashboard .pill--warn { background: rgba(217,164,65,.16); color: var(--warn); }
#dashboard .pill--err { background: rgba(224,85,107,.16); color: var(--err); }

#dashboard .foot { color: var(--dim); font-size: .76rem; text-align: center; margin-top: 18px; }

#dashboard .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
#dashboard .badge--ok { background: rgba(63,178,127,.18); color: var(--ok); }
#dashboard .badge--warn { background: rgba(217,164,65,.18); color: var(--warn); }
#dashboard .badge--err { background: rgba(224,85,107,.18); color: var(--err); }
#dashboard .badge--accent { background: rgba(109,92,255,.22); color: #a89fff; }

/* ── Architecture ── */
#dashboard .arch-svg-wrap { overflow-x: auto; padding: 4px 0 8px; }
#dashboard .arch-svg { width: 100%; min-width: 640px; height: auto; display: block; }
#dashboard .edge { stroke: #5a5f80; stroke-width: 1.5; fill: none; }
#dashboard .edge-label { font: 9px system-ui, sans-serif; fill: #8b90a6; }
#dashboard .node-label { font: 600 11px system-ui, sans-serif; fill: #e7e9f3; pointer-events: none; }
#dashboard .legend-label { font: 11px system-ui, sans-serif; fill: #8b90a6; }
#dashboard .arch-node { cursor: pointer; }
#dashboard .arch-node:hover rect { filter: brightness(1.25); }
#dashboard .arch-node:focus-visible rect { outline: 2px solid var(--accent); outline-offset: 2px; }
#dashboard .arch-hint { font-size: .8rem; margin: 0 0 6px; }
#dashboard .arch-detail { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px; position: relative; }
#dashboard .arch-detail__inner h4 { margin: 0 0 6px; font-size: .95rem; }
#dashboard .arch-detail__inner p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }
#dashboard .arch-detail__close { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; color: var(--dim); font-size: 1rem; cursor: pointer; padding: 0 4px; }
#dashboard .arch-detail__close:hover { color: var(--txt); }
#dashboard .arch-prose { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
#dashboard .prose-section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
#dashboard .prose-section h3 { margin: 0 0 10px; font-size: .95rem; color: var(--txt); }
#dashboard .prose-section p, #dashboard .prose-section li { color: var(--muted); font-size: .87rem; line-height: 1.65; }
#dashboard .prose-section p { margin: 0 0 8px; }
#dashboard .prose-section p:last-child { margin-bottom: 0; }
#dashboard .prose-section ol, #dashboard .prose-section ul { margin: 6px 0 0; padding-left: 20px; }
#dashboard .prose-section li { margin-bottom: 4px; }
#dashboard .prose-section pre { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; overflow-x: auto; margin: 8px 0; }
#dashboard .prose-section code { font-size: .82rem; color: #a89fff; font-family: monospace; }
#dashboard .prose-section pre code { color: #c5c8e8; }
#dashboard .forks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
#dashboard .fork-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
#dashboard .fork-card__head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: .88rem; }
#dashboard .fork-card__body { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
#dashboard .impr-list { margin: 8px 0 0; padding-left: 20px; }
#dashboard .impr-list li { color: var(--muted); font-size: .86rem; line-height: 1.6; margin-bottom: 5px; }

/* ── Compare ── */
#dashboard .compare-wrap { display: flex; flex-direction: column; gap: 16px; }
#dashboard .cmp-table .row-dim { color: var(--txt); font-weight: 600; font-size: .83rem; white-space: nowrap; padding-right: 18px; }
#dashboard .cmp-table .row-dim-head { color: var(--dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
#dashboard .cmp-table td { font-size: .84rem; color: var(--muted); }
#dashboard .bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
#dashboard .bl-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
#dashboard .bl-card__title { font-size: .82rem; font-weight: 700; color: var(--txt); margin-bottom: 6px; }
#dashboard .bl-card__body { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.6; }
#dashboard .other-runners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
#dashboard .other-runner { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
#dashboard .other-runner strong { font-size: .88rem; color: var(--txt); }
#dashboard .other-runner p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
#dashboard .links-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ── Goals ── */
#dashboard .goals-wrap { display: flex; flex-direction: column; }
#dashboard .goals-banner { background: rgba(217,164,65,.08); border: 1px solid rgba(217,164,65,.25); border-radius: 10px; padding: 10px 14px; font-size: .82rem; color: var(--warn); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#dashboard .goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 4px; }
#dashboard .goal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
#dashboard .goal-card__num { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
#dashboard .goal-card__title { font-size: .94rem; font-weight: 700; color: var(--txt); margin-bottom: 6px; }
#dashboard .goal-card__body { font-size: .84rem; color: var(--muted); line-height: 1.6; }
#dashboard .goal-card__body code { font-size: .8rem; color: #a89fff; }
#dashboard .goal-done { margin-top: 10px; font-size: .8rem; color: var(--ok); display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }

#dashboard code { font-family: monospace; color: #a89fff; }

@media (max-width: 720px) {
  #dashboard .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Accessibility ──────────────────────────────────────────────────────────
   Keyboard focus + reduced motion, per the design-system a11y checklist
   (matches surface/styles.css). Scoped under #dashboard like the rest of this
   file so it stays self-contained. */

/* Keyboard-only focus ring for the dashboard's buttons and links. The arch
   nodes already get this treatment via .arch-node:focus-visible above. */
#dashboard .btn:focus-visible,
#dashboard .link:focus-visible,
#dashboard .arch-detail__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Respect "reduce motion". This file ships no animations/transitions today, so
   it's a forward-looking baseline (the dashboard is rendered/extended at runtime
   by dashboard.js); !important keeps it authoritative over any future rule. */
@media (prefers-reduced-motion: reduce) {
  #dashboard *,
  #dashboard *::before,
  #dashboard *::after {
    animation: none !important;
    transition: none !important;
  }
}