/* Bug manager demo: components used only on /ai/bug-manager/demo/ */

:root {
  --sev-fatal: #a4161a;
  --sev-high: #c2410c;
  --sev-medium: #9a6700;
  --sev-low: #2f6f94;
  --sev-trivial: #6b7280;
}
:root[data-theme="dark"] {
  --sev-fatal: #ff8a80;
  --sev-high: #fb923c;
  --sev-medium: #f5c542;
  --sev-low: #7dc4e8;
  --sev-trivial: #9ca3af;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --sev-fatal: #ff8a80; --sev-high: #fb923c; --sev-medium: #f5c542; --sev-low: #7dc4e8; --sev-trivial: #9ca3af;
  }
}

.flow li.done { border-color: var(--ink); }
.flow li.done::before { content: "✓"; color: var(--ink); }
.flow li.active { border-color: var(--accent); }

.controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin: 0 0 1.25rem; }
button.button { border: 0; font-family: inherit; cursor: pointer; }
button.button[disabled] { opacity: 0.45; cursor: not-allowed; }
button.button:hover[disabled] { background: var(--ink); }
button.ghost { background: none; color: var(--ink); border: 1px solid var(--rule); padding: 0.65rem 1.1rem; border-radius: 2px; font: 500 0.95rem var(--sans); cursor: pointer; }
button.ghost:hover { border-color: var(--accent); color: var(--accent); }
button.ghost[disabled] { opacity: 0.45; cursor: not-allowed; }
button.ghost:focus-visible, button.chip:focus-visible, .expander:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.6rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.repos li { border: 1px solid var(--rule); padding: 0.55rem 0.8rem; border-radius: 2px; }
.repos b { display: block; font: 400 0.8125rem/1.5 var(--mono); overflow-wrap: anywhere; }
.repos span { display: block; font: 400 0.75rem/1.5 var(--mono); color: var(--muted); }
.repos li.scanning { border-color: var(--accent); }
.repos li.scanned { border-color: var(--ink); }

.progress { height: 4px; background: var(--rule); margin: 0 0 0.9rem; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }
.scanlog { margin: 0 0 1.5rem; padding: 0; list-style: none; font: 400 0.8125rem/1.7 var(--mono); color: var(--muted); max-height: 9.5rem; overflow: auto; }
.scanlog li b { color: var(--ink); font-weight: 400; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem; margin: 0 0 1.75rem; }
.kpi { border: 1px solid var(--rule); padding: 0.7rem 0.9rem; border-radius: 2px; }
.kpi b { display: block; font: 400 1.9rem/1.1 var(--serif); }
.kpi span { font: 400 0.75rem/1.5 var(--mono); color: var(--muted); }
.sevbar { display: flex; height: 0.6rem; margin: 0 0 0.5rem; border-radius: 2px; overflow: hidden; background: var(--rule); }
.sevbar i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font: 400 0.8125rem/1.6 var(--mono); }

.dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: baseline; }
.s-fatal { --c: var(--sev-fatal); } .s-high { --c: var(--sev-high); } .s-medium { --c: var(--sev-medium); } .s-low { --c: var(--sev-low); } .s-trivial { --c: var(--sev-trivial); }
.dot, .sevbar i { background: var(--c); }

.filters { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 0 0 1rem; }
.filters label { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); display: inline-flex; gap: 0.4rem; align-items: center; }
.filters select, .filters input[type="search"] { font: 400 0.9rem var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: 0.35rem 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
button.chip { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 0.3rem 0.6rem; cursor: pointer; }
button.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--code-bg); }
.count { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); margin: 0 0 0.6rem; }

table.findings { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.findings th, table.findings td { text-align: left; vertical-align: top; padding: 0.65rem 0.9rem 0.65rem 0; border-top: 1px solid var(--rule); font-weight: 400; }
table.findings thead th { border-top: 0; padding-top: 0; font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); white-space: nowrap; }
table.findings td.rank { font: 400 0.8125rem/1.7 var(--mono); color: var(--muted); white-space: nowrap; }
table.findings td .sub { display: block; font: 400 0.75rem/1.5 var(--mono); color: var(--muted); }
table.findings .sevcell { white-space: nowrap; }
.status-fixed { color: var(--muted); text-decoration: line-through; }
tr.is-fixed td { opacity: 0.55; }
.expander { background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.expander:hover { text-decoration-color: var(--accent); }
tr.detail td { padding: 0 0 1.1rem; border-top: 0; }
.detailbox { border: 1px solid var(--rule); padding: 1rem 1.1rem; border-radius: 2px; max-width: 46rem; }
.detailbox h4 { margin: 0.9rem 0 0.35rem; font: 400 0.75rem/1.5 var(--mono); color: var(--muted); }
.detailbox h4:first-child { margin-top: 0; }
.detailbox p { margin: 0; }
.detailbox pre { margin: 0; font-size: 0.78rem; }

.sprint { display: grid; gap: 1rem; margin: 0 0 1rem; }
.sprint label { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sprint input[type="range"] { width: min(18rem, 100%); accent-color: var(--accent); }
.chart { width: 100%; height: auto; display: block; margin: 0.5rem 0 0.4rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); }
.chart text { fill: var(--muted); font: 400 11px var(--mono); }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .ranked { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.chart .random { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.result-line { font: 400 0.9rem/1.6 var(--sans); max-width: 44rem; }
.empty { color: var(--muted); border: 1px dashed var(--rule); padding: 1rem 1.1rem; border-radius: 2px; }

@media (max-width: 52rem) {
  table.findings, table.findings tbody { display: block; width: 100%; }
  .detailbox { min-width: 0; }
  .detailbox pre { max-width: 100%; overflow-x: auto; }
  table.findings thead { position: absolute; left: -999px; }
  table.findings tr { display: block; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
  table.findings tbody tr:first-child { border-top: 0; padding-top: 0; }
  table.findings th, table.findings td { display: block; border: 0; padding: 0.1rem 0; }
  table.findings td::before { content: attr(data-label); display: block; margin-top: 0.35rem; font: 400 0.72rem/1.5 var(--mono); color: var(--muted); }
  table.findings td.rank::before, table.findings td.first::before { display: none; }
  tr.detail { padding: 0 0 0.9rem; border-top: 0; }
  tr.detail td::before { display: none; }
}