/* dashboard.css - insights dashboard mode (item 35), the compose form
 * (item 33) and the AI provider section (item 34). Variables first, one
 * dark block (A12 rule for every module stylesheet). */

:root {
  --dash-bg: #f6f3ec;
  --dash-border: #d8d2c4;
  --dash-text: #2b2a26;
  --dash-muted: #6b675c;
  --dash-accent: #854f0b;
  --dash-card-bg: #fdfcf8;
}

body.dark {
  --dash-bg: #23211c;
  --dash-border: #3c382f;
  --dash-text: #e8e6df;
  --dash-muted: #a8a294;
  --dash-accent: #d9a35c;
  --dash-card-bg: #2a2822;
}

/* ---- the dashboard mode ---- */

#dashboard {
  color: var(--dash-text);
  padding: 8px 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
#dashboard[hidden] { display: none !important; }
body.dash-mode .output-wrap { display: none !important; }

.dash-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dash-title { font-weight: 600; font-size: 14px; }
.dash-stats { color: var(--dash-muted); font-size: 11.5px; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  align-items: start;
}
/* every insight section becomes a card in the grid - the sections ARE the
 * cards, so anything registered in the panel appears here unchanged */
.dash-grid .insight-section {
  border: 1px solid var(--dash-border);
  background: var(--dash-card-bg);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
  max-height: 340px;
  overflow-y: auto;
}
.dash-grid .insight-empty { grid-column: 1 / -1; color: var(--dash-muted); }

/* ---- composed insights (item 33) ---- */

.compose-form { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.compose-form-row { display: flex; gap: 6px; align-items: center; }
.compose-in {
  border: 1px solid var(--dash-border);
  background: var(--dash-card-bg);
  color: var(--dash-text);
  border-radius: 4px;
  padding: 3px 6px;
  font: inherit;
  font-size: 12px;
}
.compose-sel, .compose-add {
  border: 1px solid var(--dash-border);
  background: var(--dash-card-bg);
  color: var(--dash-text);
  border-radius: 4px;
  padding: 2px 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.compose-add { color: var(--dash-accent); font-weight: 600; }
.compose-row { gap: 8px; }
.compose-key { font-weight: 600; }
.compose-agg { color: var(--dash-accent); }
.compose-values { color: var(--dash-muted); font-size: 11.5px; }
.compose-remove { margin-left: auto; }

/* ---- AI providers (item 34) ---- */

.ai-config { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.ai-config-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ai-note { color: var(--dash-muted); font-size: 11.5px; line-height: 1.45; }
.ai-run { border-top: 1px dashed var(--dash-border); padding-top: 5px; margin-top: 5px; }
.ai-run-head { display: flex; gap: 8px; align-items: baseline; }
.ai-run-provider { font-weight: 600; }
.ai-run-scope { color: var(--dash-muted); font-size: 11.5px; }
.ai-run-pending { color: var(--dash-accent); }
.ai-run-error { color: #a5341d; }
body.dark .ai-run-error { color: #ef9a8d; }
.ai-run-text { white-space: pre-wrap; line-height: 1.45; margin-top: 3px; }
.ai-kv { display: flex; gap: 8px; }
.ai-kv-key { font-weight: 600; }

/* ---- triage dashboard (item 49) ---- */
.triage-stat-value { font-size: 22px; font-weight: 600; color: var(--dash-accent); }