/* bridge-ui.css — shared BRidge surface components (Pass 3). Works on the light Bootstrap admin pages and
   the dark trader terminal: colours come from --bui-* variables with Bootstrap fallbacks. Tone meanings are
   fixed: ok (healthy), info, warn (incl. UNKNOWN — never green), bad, muted (empty / not configured),
   advisory (model output, never an instruction). Colour is never the only signal: every badge has text. */
:root {
  --bui-ok-bg: #e6f4ea; --bui-ok-fg: #1e6b34;
  --bui-info-bg: #e7f0fb; --bui-info-fg: #1d4f91;
  --bui-warn-bg: #fff4d6; --bui-warn-fg: #7a5200;
  --bui-bad-bg: #fde8e8; --bui-bad-fg: #9b1c1c;
  --bui-muted-bg: #eef0f3; --bui-muted-fg: #4b5563;
  --bui-adv-bg: #efe9fb; --bui-adv-fg: #5b2a9c;
  --bui-line: rgba(0,0,0,.12);
  --bui-text-muted: #5f6b7a;
}
[data-bs-theme="dark"], .bui-dark {
  --bui-ok-bg: rgba(46,160,67,.18); --bui-ok-fg: #7ee2a0;
  --bui-info-bg: rgba(56,139,253,.18); --bui-info-fg: #9ecbff;
  --bui-warn-bg: rgba(210,153,34,.20); --bui-warn-fg: #f2cc60;
  --bui-bad-bg: rgba(248,81,73,.18); --bui-bad-fg: #ffa198;
  --bui-muted-bg: rgba(255,255,255,.08); --bui-muted-fg: rgba(255,255,255,.70);
  --bui-adv-bg: rgba(163,113,247,.20); --bui-adv-fg: #d2b8ff;
  --bui-line: rgba(255,255,255,.12);
  --bui-text-muted: rgba(255,255,255,.62);
}

.bui-badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  line-height: 1.4; white-space: nowrap; border: 1px solid transparent; vertical-align: middle;
}
.bui-tone-ok       { background: var(--bui-ok-bg);    color: var(--bui-ok-fg); }
.bui-tone-info     { background: var(--bui-info-bg);  color: var(--bui-info-fg); }
.bui-tone-warn     { background: var(--bui-warn-bg);  color: var(--bui-warn-fg); border-style: dashed; border-color: currentColor; }
.bui-tone-bad      { background: var(--bui-bad-bg);   color: var(--bui-bad-fg); }
.bui-tone-muted    { background: var(--bui-muted-bg); color: var(--bui-muted-fg); }
.bui-tone-advisory { background: var(--bui-adv-bg);   color: var(--bui-adv-fg); text-transform: uppercase; letter-spacing: .04em; }

.bui-ptype {
  display: inline-block; padding: 0 .4rem; margin-left: .25rem; border-radius: 4px; font-size: .7rem;
  border: 1px solid var(--bui-line); color: var(--bui-text-muted); white-space: nowrap; vertical-align: middle;
}
.bui-ptype-forecast { color: var(--bui-adv-fg); border-color: currentColor; }
.bui-ptype-manual_override { color: var(--bui-warn-fg); border-color: currentColor; }
.bui-ptype-none { font-style: italic; }

.bui-muted { color: var(--bui-text-muted); font-size: .85em; }
.bui-empty { padding: .75rem; border: 1px dashed var(--bui-line); border-radius: 8px; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bui-empty-msg { color: var(--bui-text-muted); }
.bui-h3 { font-size: 1rem; font-weight: 600; margin: 0; }

.bui-prov { margin-top: .35rem; font-size: .8rem; }
.bui-prov summary { cursor: pointer; color: var(--bui-text-muted); }
.bui-prov summary:focus-visible { outline: 2px solid var(--bui-info-fg); outline-offset: 2px; }
.bui-prov dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .15rem .75rem; margin: .4rem 0 0; }
.bui-prov dt { font-weight: 600; word-break: break-word; }
.bui-prov dd { margin: 0; word-break: break-word; }

.bui-advisory { border: 1px solid var(--bui-adv-fg); border-radius: 10px; padding: .75rem; margin: .75rem 0; }
.bui-advisory-head { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
.bui-signal { border-top: 1px solid var(--bui-line); padding: .5rem 0; }
.bui-signal:first-of-type { border-top: 0; }
.bui-signal p { margin: .35rem 0; }

.bui-table { margin-bottom: 0; }
.bui-table th { white-space: nowrap; font-size: .8rem; }
.bui-table td { vertical-align: middle; font-size: .85rem; }
.bui-kv { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .25rem 1rem; }
.bui-kv dt { color: var(--bui-text-muted); font-weight: 500; }
.bui-kv dd { margin: 0; }
.bui-card { border: 1px solid var(--bui-line); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.bui-card > h2, .bui-card > h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.bui-timeline { list-style: none; padding-left: 0; margin: 0; }
.bui-timeline li { border-left: 2px solid var(--bui-line); padding: .25rem 0 .5rem .75rem; position: relative; }
.bui-timeline li::before { content: ""; position: absolute; left: -5px; top: .55rem; width: 8px; height: 8px; border-radius: 50%; background: var(--bui-info-fg); }

.bui-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; padding: .4rem 0; }
.bui-nav-group { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.bui-nav-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bui-text-muted); margin-right: .25rem; }
.bui-nav-link { padding: .2rem .55rem; border-radius: 6px; text-decoration: none; font-size: .85rem; }
.bui-nav-link.active { background: var(--bui-info-bg); color: var(--bui-info-fg); font-weight: 600; }
.bui-nav-link:focus-visible { outline: 2px solid var(--bui-info-fg); outline-offset: 2px; }

/* narrow screens: stacked tables keep their labels */
@media (max-width: 640px) {
  .bui-table thead { display: none; }
  .bui-table tr { display: block; border-bottom: 1px solid var(--bui-line); padding: .35rem 0; }
  /* label above value: a flex row spread and clipped cells holding several inline nodes (badge + note) */
  .bui-table td { display: block; border: 0; padding: .15rem .25rem; overflow-wrap: anywhere; }
  .bui-table td > * { max-width: 100%; }
  .bui-table td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; color: var(--bui-text-muted); }
  .bui-kv, .bui-prov dl { grid-template-columns: 1fr; }
  .bui-nav { flex-direction: column; align-items: flex-start; }
}

/* shared nav on pre-Pass-3 shells: a thin bar above each page's own menu */
.bui-shell-nav { padding: 0 1rem; border-bottom: 1px solid var(--bui-line); font-size: .9rem; }
.bui-shell-nav.bui-dark { background: rgba(0,0,0,.25); }
.bui-shell-nav.bui-dark .bui-nav-link { color: rgba(255,255,255,.85); }
.bui-shell-nav:empty { display: none; }

/* Collapsed context stays compact beside a taller operational panel. */
details.bui-card:not([open]) { align-self: start; }