/* ============================================================================
   AI Control (Palo Alto) — dashboard, run detail, diff, and the public showcase.
   Uses the shared tokens from main.css (--navy, --gold, --gold-ink, --border,
   --font-mono). Loaded by app/templates/aicontrol/*.html.
   ============================================================================ */

.rb-wrap { padding: 2rem 1.75rem 4rem; max-width: 1180px; margin: 0 auto; }
.rb-wrap--wide { max-width: 100%; }

.rb-h { font-family: var(--font-head); font-size: 1.5rem; color: var(--navy); margin: 0 0 0.25rem; }
.rb-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 1.5rem; }
.rb-section-h {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-ink); margin: 2rem 0 0.75rem;
}
.rb-empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.9rem;
}

/* ── version band ─────────────────────────────────────────────────────── */
.rb-band {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  background: var(--navy); color: #eef2f8;
  border-radius: var(--radius); padding: 1rem 1.35rem; margin-bottom: 1.5rem;
}
.rb-band__item { display: flex; flex-direction: column; gap: 0.15rem; }
.rb-band__k {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #a9bcd8;
}
.rb-band__v { font-family: var(--font-mono); font-size: 0.95rem; color: var(--gold-bright); }
.rb-band__v--sm { font-size: 0.8rem; color: #eef2f8; }
.rb-band--warn { outline: 2px solid var(--gold); }
.rb-band__warn {
  width: 100%; font-size: 0.78rem; color: var(--gold-bright);
  font-family: var(--font-mono); border-top: 1px solid rgba(227,178,60,.25); padding-top: 0.6rem;
}

/* ── summary tiles ────────────────────────────────────────────────────── */
.rb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.85rem; }
.rb-tile {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.9rem 1rem; background: var(--bg-card);
}
.rb-tile__k {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.rb-tile__v { font-family: var(--font-head); font-size: 1.9rem; color: var(--navy); line-height: 1.1; }
.rb-tile--alert { border-color: var(--gold); background: #fff9ec; }
.rb-tile--alert .rb-tile__v { color: var(--gold-ink); }

/* ── tables ──────────────────────────────────────────────────────────── */
.rb-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.rb-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.rb-table th, .rb-table td { padding: 0.5rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rb-table th {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); background: var(--bg-surface);
  position: sticky; top: 0; cursor: pointer; user-select: none;
}
.rb-table th[data-sort]::after { content: " \2195"; opacity: 0.3; }
.rb-table tbody tr:hover { background: var(--bg-surface); }
.rb-table td.host, .rb-table td.mono { font-family: var(--font-mono); }
.rb-table td.num { text-align: right; font-family: var(--font-mono); }
.rb-table a { color: var(--navy); text-decoration: underline; }

.rb-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.7rem;
  padding: 0.1rem 0.45rem; border-radius: 4px; border: 1px solid transparent;
}
.rb-badge.is-ok   { color: #1c7a44; background: #e7f6ec; border-color: #b6e3c6; }
.rb-badge.is-bad  { color: #a3232b; background: #fdecec; border-color: #f2c2c2; }
.rb-badge.is-warn { color: #8a5a12; background: #fdf3e0; border-color: #f0d9ac; }

/* ── comparison matrix ───────────────────────────────────────────────── */
table.rb-matrix { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.rb-matrix th, .rb-matrix td { padding: 0.6rem 0.8rem; border: 1px solid var(--border); text-align: center; }
.rb-matrix th { background: var(--navy); color: #eef2f8; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.rb-matrix td:first-child, .rb-matrix th:first-child { text-align: left; }
.rb-matrix .lane { font-family: var(--font-mono); color: var(--navy); font-weight: 700; }
.rb-matrix .lane small { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.68rem; }
.rb-matrix .num { font-family: var(--font-mono); }
.rb-matrix .gap-hot { color: #a3232b; font-weight: 700; }
.rb-matrix .nodata { color: var(--text-muted); }

/* ── filters ─────────────────────────────────────────────────────────── */
.rb-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.rb-filters label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.rb-filters select, .rb-filters input {
  font-family: var(--font-mono); font-size: 0.8rem; padding: 0.35rem 0.5rem;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
}

/* ── EDL panel ───────────────────────────────────────────────────────── */
.rb-edl { display: grid; gap: 0.6rem; }
.rb-edl__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem;
}
.rb-edl__name { font-family: var(--font-mono); font-weight: 700; color: var(--navy); min-width: 150px; }
.rb-edl__count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--gold-ink); }
.rb-edl__url {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted);
  flex: 1; min-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-copy {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem; border: 1px solid var(--navy); background: var(--navy); color: #fff;
  border-radius: 4px; cursor: pointer;
}
.rb-copy.is-ok { background: #1c7a44; border-color: #1c7a44; }

/* ── trend chart ─────────────────────────────────────────────────────── */
.rb-chart { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.rb-chart canvas { max-height: 320px; }

/* ── diff ────────────────────────────────────────────────────────────── */
.rb-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 780px) { .rb-diff-cols { grid-template-columns: 1fr; } }
.rb-diff-h { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.rb-diff-h.closed { color: #1c7a44; }
.rb-diff-h.opened { color: #a3232b; }