/* mod-insights.css — Module I (dashboards, reviews, referral program). */

/* F-pattern: KPI cards top-left, charts below, details under. */
.ins-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.ins-kpi {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e3e3e3);
  border-radius: 10px;
  padding: 12px;
}
.ins-kpi-label {
  font-size: 12px;
  color: var(--muted, #666);
  margin-bottom: 4px;
}
.ins-kpi-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}
.ins-kpi-value.muted { color: var(--muted, #999); }
.ins-unit { font-size: 14px; font-weight: 400; color: var(--muted, #666); }
.ins-kpi p { margin: 6px 0 0; }
.ins-kpi.na .ins-kpi-na {
  font-size: 22px;
  font-weight: 600;
  color: var(--muted, #999);
}

/* CSS-only bar charts. */
.ins-bars { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ins-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 64px;
  gap: 8px;
  align-items: center;
}
.ins-bar-label { font-size: 13px; }
.ins-bar-track {
  height: 14px;
  background: var(--track, #eee);
  border-radius: 7px;
  overflow: hidden;
}
.ins-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent, #2f7d4f);
  border-radius: 7px;
  min-width: 2px;
}
.ins-bar-value { font-size: 13px; font-weight: 600; text-align: right; }
.ins-bar-hint { grid-column: 1 / -1; }

/* Plain-language one-liners + lists. */
.ins-oneliner { font-size: 15px; margin: 8px 0; }
.ins-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ins-list li { padding: 6px 0; border-bottom: 1px solid var(--border, #eee); }
.ins-list li:last-child { border-bottom: none; }

/* Range picker + chips. */
.ins-rangepick, .ins-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* Status pills. */
.ins-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--track, #eee);
  color: var(--muted, #555);
  margin-left: 6px;
  vertical-align: middle;
}
.ins-pill-scheduled { background: #e8f0fe; color: #1a56db; }
.ins-pill-queued { background: #fef3c7; color: #92400e; }
.ins-pill-r-positive { background: #dcfce7; color: #166534; }
.ins-pill-r-negative { background: #fee2e2; color: #991b1b; }
.ins-pill-expired { background: var(--track, #eee); color: var(--muted, #777); }
.ins-pill-fu { background: #ffedd5; color: #9a3412; }

/* Review queue items. */
.rev-item > div { margin-bottom: 6px; }
.rev-response {
  margin: 8px 0 4px 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--border, #ddd);
}
.rev-response .btn { margin-top: 6px; }

/* Client pick lists in modals. */
.ins-picklist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; max-height: 220px; overflow-y: auto; }
.ins-pick { text-align: left; justify-content: flex-start; }

/* Public review sentiment buttons. */
.ins-senti { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.ins-senti .btn { flex: 1 1 160px; }

.ins-links { display: flex; gap: 10px; margin: 14px 0 24px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .ins-kpis { grid-template-columns: repeat(2, 1fr); }
  .ins-bar-row { grid-template-columns: 84px 1fr 52px; }
}