/* Reports screen. Depends on cue-brand.css for tokens. */

.rep-wrap { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; }

.rep-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.rep-head h1 { margin: 0; font-size: 24px; font-weight: 700; color: var(--cue-navy); letter-spacing: -0.01em; }
.rep-window {
  font-size: 12px; font-weight: 650; color: var(--cue-ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rep-sub { margin: 0 0 26px; color: var(--cue-ink-2); font-size: 14px; }

.rep-block { margin-bottom: 34px; }
.rep-block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.rep-block-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--cue-navy); }
.rep-count { font-size: 13px; font-weight: 600; color: var(--cue-green); }

/* ---- Recommendations ---------------------------------------------------- */

.rec { padding: 18px 20px; margin-bottom: 12px; }
.rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rec-where { font-size: 12px; color: var(--cue-ink-3); }

.rec-headline {
  margin: 0 0 5px; font-size: 17px; line-height: 1.35;
  font-weight: 650; color: var(--cue-navy); letter-spacing: -0.01em;
}
.rec-detail { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--cue-ink-2); }

/* Evidence sits on a tinted panel with a brand-coloured edge: it is quoted
   material, not the product's own voice, and it should not read as such. */
.rec-evidence {
  background: var(--cue-blue-tint);
  border-left: 3px solid var(--cue-blue);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.rec-evidence-title {
  margin: 0 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #036f90;
}
.rec-evidence ul { margin: 0; padding-left: 18px; }
.rec-evidence li { font-size: 13.5px; line-height: 1.5; color: var(--cue-ink); margin-bottom: 3px; }

.rec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-result { margin: 10px 0 0; font-size: 13px; }
.rec-result.ok { color: var(--cue-green); font-weight: 600; }
.rec-result.err { color: var(--cue-danger); }

.rep-empty {
  text-align: center; padding: 40px 20px;
  background: var(--cue-green-tint); border-radius: var(--cue-radius-lg);
}
.rep-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 650; color: #0b7f4e; }
.rep-empty-body { margin: 0 auto; max-width: 460px; font-size: 14px; line-height: 1.5; color: var(--cue-ink-2); }

/* ---- Stats -------------------------------------------------------------- */

.rep-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat {
  background: var(--cue-surface); border: 1px solid var(--cue-line);
  border-radius: var(--cue-radius); padding: 14px 16px;
}
.stat-value { font-size: 26px; font-weight: 700; color: var(--cue-navy); line-height: 1.1; }
.stat-label {
  margin-top: 3px; font-size: 12px; color: var(--cue-ink-3);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.stat-warn { border-color: #f0d5b4; background: var(--cue-warn-tint); }
.stat-warn .stat-value { color: var(--cue-warn); }

/* ---- Panels ------------------------------------------------------------- */

.rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rep-panel {
  background: var(--cue-surface); border: 1px solid var(--cue-line);
  border-radius: var(--cue-radius-lg); padding: 16px 18px;
}
.rep-panel h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--cue-navy); }
.muted { color: var(--cue-ink-3); font-size: 13.5px; margin: 0; }

.bar-row { display: grid; grid-template-columns: 1fr 110px 68px; gap: 10px; align-items: center; margin-bottom: 9px; }
.bar-name { font-size: 13.5px; color: var(--cue-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 7px; background: var(--cue-line-soft); border-radius: 999px; overflow: hidden; }
/* The bar uses the ramp's blue-to-green half — the "positive" end of the
   brand. Read cards are the good news on this screen. */
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--cue-blue), var(--cue-green)); border-radius: 999px; }
.bar-value { font-size: 12px; color: var(--cue-ink-3); text-align: right; }

.list-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--cue-line-soft); font-size: 13.5px;
}
.list-row:last-child { border-bottom: 0; }
.list-name { color: var(--cue-ink); }
.list-meta { color: var(--cue-ink-3); font-size: 12.5px; white-space: nowrap; }

.q-row { padding: 9px 0; border-bottom: 1px solid var(--cue-line-soft); }
.q-row:last-child { border-bottom: 0; }
.q-text { margin: 0 0 3px; font-size: 13.5px; line-height: 1.45; color: var(--cue-ink); }
.q-meta { font-size: 11.5px; color: var(--cue-ink-3); }

#rep-error { color: var(--cue-danger); background: var(--cue-danger-tint); padding: 12px 14px; border-radius: 8px; }

@media (max-width: 860px) {
  .rep-stats { grid-template-columns: repeat(2, 1fr); }
  .rep-cols { grid-template-columns: 1fr; }
}

/* ===== Problems queue ===================================================== */

.prob-filters { display: flex; gap: 6px; margin-bottom: 18px; }
.prob-filters .cue-btn.on {
  background: var(--cue-navy); color: #fff; border-color: var(--cue-navy);
}

.prob { padding: 16px 18px; margin-bottom: 12px; }
.prob-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.prob-multi {
  font-size: 11px; font-weight: 700; color: var(--cue-danger);
  background: var(--cue-danger-tint); padding: 3px 8px; border-radius: 999px;
}
.prob-where { font-size: 12px; color: var(--cue-ink-3); }
.prob-title { margin: 0 0 4px; font-size: 16px; font-weight: 650; color: var(--cue-navy); }

/* The suggested action is the loudest text in the row after the title. It is
   what the manager is being asked to do, and burying it under the reporters'
   comments would turn this back into a list of classifications. */
.prob-action { margin: 0 0 12px; font-size: 13.5px; color: var(--cue-ink-2); font-weight: 550; }

.prob-items { border-left: 2px solid var(--cue-line); padding-left: 12px; margin-bottom: 12px; }
.prob-item { margin-bottom: 8px; }
.prob-item:last-child { margin-bottom: 0; }
.prob-who { font-size: 12px; color: var(--cue-ink-3); }
.prob-desc { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--cue-ink); }
.prob-sub { font-size: 11px; color: var(--cue-ink-3); font-style: italic; }
.prob-actions { display: flex; gap: 8px; }

/* ===== Review queue ====================================================== */

.rev-intro { margin: 0 0 16px; font-size: 14px; color: var(--cue-ink-2); }

.rev-card { padding: 16px 18px; margin-bottom: 12px; border-left: 3px solid var(--cue-line); }
.rev-card.t-info  { border-left-color: var(--cue-blue); }
.rev-card.t-warn  { border-left-color: var(--cue-warn); }
.rev-card.t-money { border-left-color: var(--cue-green); }

.rev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rev-title { margin: 0; font-size: 16px; font-weight: 650; color: var(--cue-navy); }
.rev-spacer { flex: 1; }

.rev-bullets { margin: 0 0 12px; padding-left: 20px; }
.rev-bullets li { font-size: 14px; line-height: 1.55; color: var(--cue-ink); margin-bottom: 3px; }

.rev-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rev-meta { font-size: 12.5px; color: var(--cue-ink-3); }

/* ===== Tab badges ======================================================== */

/* Counts, not dots. "3" tells you whether to look now; a dot only tells you
   something exists, which after the first week is always true. */
.tab-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cue-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.rep-error {
  color: var(--cue-danger); background: var(--cue-danger-tint);
  padding: 12px 14px; border-radius: 8px;
}

/* ===== Brand override for the ported admin =============================== */
/*
 * The admin was ported from skillcopilot with `--accent: #7c3aed` — a purple
 * that appears nowhere in the Cue logo. Every primary button, active tab and
 * focus ring in ~12,000 lines of ported markup reads from it.
 *
 * Repointing the two variables rebrands all of them at once. The alternative
 * — editing every rule that mentions `--accent` — would be a large diff, and
 * would miss the ones added after it.
 *
 * This file loads BEFORE admin.css, so these are declared at a higher
 * specificity rather than relying on order.
 */
:root,
html body {
  --accent: #0197c4;      /* the blue from the open end of the C */
  --accent-dark: #01436d; /* mid navy, for the pressed state */
}

/* The ported primary button gets the sweep, so the loudest control on any
   admin screen is unmistakably Cue's. */
html body button.primary {
  background: var(--cue-sweep);
  background-size: 200% 100%;
  transition: background-position 0.35s ease;
}
html body button.primary:hover {
  background: var(--cue-sweep);
  background-size: 200% 100%;
  background-position: 60% 0;
}

/* The active tab underline picks up the green end of the ramp — the same
   accent the extension panel uses for the current page. */
html body #detail-tabs .tab.active {
  color: var(--cue-navy);
  border-bottom-color: var(--cue-green);
}

html body .topbar .dev-tag {
  background: var(--cue-warn-tint);
  color: var(--cue-warn);
  font-weight: 700;
  letter-spacing: 0.04em;
}


/* The tab bar carries 15 tabs now. Without wrapping, the ones added last —
   which are the ones this release exists to add — fall off the right edge. */
html body #detail-tabs { flex-wrap: wrap; row-gap: 2px; }