/* The Command Centre overview: figures, the unowned banner, the priority queue, portfolio heat and dormant alerts. Tokens only. */

/* ── a target with no owner ── */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-bottom: 14px; padding: 12px 15px; border-color: var(--amber-line); background: var(--risk-m-b); }
.banner > .icon { color: var(--risk-m); }
.banner__text { flex: 1; min-width: 220px; font-size: 13px; }
.banner__sub { margin-top: 2px; font-size: 12px; color: var(--body); }

/* ── the two columns ── */
/* The two columns end level: the side column is as tall as the queue, and Dormant alerts fills what Portfolio heat leaves,
   its list scrolling. Its own height never sets the row's (contain: size), so a long list cannot push the side lower. */
.overview { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; align-items: stretch; }
.overview__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.quiet-card { flex: 1; display: flex; flex-direction: column; min-height: 280px; contain: size; }

/* ── the priority queue ── */
.queue__row { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.queue__row:last-child { border-bottom: none; }
.queue__row:hover { background: var(--hover); }
.queue__row:hover .org { text-decoration: underline; }
.queue__n { width: 14px; font-size: 11px; color: var(--faint); }
.queue__main { flex: 1; min-width: 0; }
.queue__title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.queue__main .org-s { display: block; }
.queue__late { color: var(--risk-h); font-weight: 600; }
.queue__ribbon .ribbon, .queue__ribbon .ribbon-empty { width: 120px; }
.queue__value { width: 62px; text-align: right; }
.queue__weighted { display: block; font-size: 12px; font-weight: 600; }
.queue__label { display: block; font-size: 10px; color: var(--muted); }

/* ── portfolio heat ── */
.heat { padding: 16px; }
.heat__title { margin: 0 0 10px; }
.heat__body { display: flex; align-items: center; gap: 22px; }
.heat__legend { flex: 1; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.heat__legend li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.heat__legend i { width: 9px; height: 9px; border-radius: 2px; }
.heat__name { flex: 1; color: var(--body); }
.heat__count { font-weight: 600; }

/* ── dormant alerts ── */
.quiet__count { font-size: 12px; color: var(--risk-h); }
.quiet { flex: 1; min-height: 0; overflow-y: auto; }
.quiet__row { display: flex; align-items: center; gap: 9px; padding: 8px 15px; border-bottom: 1px solid var(--rule); font-size: 12.5px; color: inherit; text-decoration: none; }
.quiet__row:last-child { border-bottom: none; }
.quiet__row:hover { background: var(--hover); }
.quiet__main { flex: 1; min-width: 0; }
.quiet__org { display: block; font-weight: 600; }
.quiet__who { display: block; font-size: 11px; color: var(--muted); }
.quiet__none { padding: 20px; text-align: center; font-size: 12.5px; color: var(--muted); }

@media (max-width: 1200px) {
  .kpis--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .kpis--5 { grid-template-columns: repeat(2, 1fr); }
  .overview { grid-template-columns: 1fr; }
  /* One column: nothing to line up with, so the list keeps a height of its own. */
  .quiet-card { contain: none; min-height: 0; }
  .quiet { max-height: 228px; }
}

/* ── the Workflow Map: the loop figures and the nine-step closed loop, as in the reference build ── */
.loop { padding: 16px; }
.loopgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.loopcard {
  display: flex; flex-direction: column; gap: 9px; min-height: 150px; padding: 16px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 5px; color: inherit; text-decoration: none;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.loopcard:hover { transform: translateY(-1px); border-color: var(--rule-hover); box-shadow: var(--shadow-lift); }
.loopcard:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.loopcard__top { display: flex; align-items: center; gap: 9px; }
.loopcard__no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: var(--green-w); color: var(--green-ink); font-family: var(--data); font-size: 11px; font-weight: 700; }
.loopcard__icon { display: inline-flex; color: var(--navy); }
.loopcard__soon { margin-left: auto; }
.loopcard h3 { font-size: 14px; }
.loopcard p { flex: 1; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.loopcard__next { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .loopcard, .loopcard:hover { transition: none; transform: none; } }
@media (max-width: 1000px) {
  .loopgrid { grid-template-columns: 1fr; }
  .loopsummary { grid-template-columns: repeat(2, 1fr); }
}

/* ── Insights: activity by week, the intervention mix, value by stage and sector performance, as in the reference build ── */
.ins-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ins-col { display: grid; gap: 12px; min-width: 0; }
.ins-card { padding: 16px; }
.ins-card__title { margin: 0 0 12px; }
.ins-chart + .ins-chart { margin-top: 10px; }
.ins-chart__name { margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--body); }
.ins-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: -4px 0 12px; font-size: 11.5px; color: var(--muted); }
.ins-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ins-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.ins-legend__part { background: var(--navy); }

.bars { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.bars__row { display: grid; grid-template-columns: 8px 118px 1fr 28px; align-items: center; gap: 8px; font-size: 11.5px; }
.bars--stage .bars__row { grid-template-columns: 8px 150px 1fr 118px; }
.bars__key { width: 8px; height: 8px; border-radius: 2px; background: var(--faint); }
.bars__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--body); }
.bars__track { position: relative; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.bars__track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; }
.bars__whole { background: var(--rule-hover); }
.bars__part { background: var(--faint); }
.bars__figure { min-width: 22px; text-align: right; font-weight: 600; }

.tbl--static tbody tr { cursor: default; }
.ins-hot { color: var(--hot); font-weight: 600; }
.ins-none { color: var(--faint); }
.ins-strong { font-weight: 600; }

@media (max-width: 1000px) {
  .ins-split { grid-template-columns: 1fr; }
  .bars--stage .bars__row { grid-template-columns: 8px 110px 1fr 112px; }
}

/* ── Performance: pipeline goals, the executive heatmap and the client relationship map, as in the reference build ── */
.perf-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.perf-title .eyebrow { margin: 0; }
.perf-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 22px; }
.perf-none { margin-bottom: 22px; padding: 20px; text-align: center; font-size: 12.5px; color: var(--muted); }
.perf-goal { padding: 15px; }
.perf-goal__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.perf-goal__who { flex: 1; min-width: 0; }
.perf-goal__label { font-size: 13px; font-weight: 700; }
.perf-goal__sub { font-size: 11.5px; color: var(--muted); }
.perf-goal__foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.perf-goal__money { flex: 1; font-size: 11px; color: var(--muted); }
.perf-goal__actions { display: flex; gap: 2px; margin: -4px -6px -4px 0; }
.perf-bar { display: grid; grid-template-columns: 44px 1fr 56px; align-items: center; gap: 8px; margin-bottom: 8px; }
.perf-bar__name { font-size: 11px; color: var(--muted); }
.perf-bar__figure { text-align: right; font-size: 11px; }
.perf-bar__fill--count { background: var(--navy); }
.perf-bar__fill--value { background: var(--green-d); }
.perf-bar__fill--short { background: var(--risk-m); }

.perf-card { margin-bottom: 12px; }
.perf-card .tbl tbody th { padding: 10px 11px; border-bottom: 1px solid var(--rule); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; color: var(--text); background: none; white-space: nowrap; user-select: auto; }
.perf-card .tbl tbody tr:last-child th { border-bottom: none; }
.perf-who { display: flex; align-items: center; gap: 8px; }
.perf-hot { color: var(--hot); font-weight: 600; }
.perf-dormant { color: var(--risk-m); font-weight: 600; }
.perf-overdue { color: var(--risk-h); font-weight: 600; }
.perf-nobody { background: var(--risk-m-b); }
.perf-nobody:hover { background: var(--risk-m-b); }
a.chip { text-decoration: none; }
.perf-risk-col { width: 160px; }
.perf-risk { display: flex; align-items: center; gap: 8px; }
.perf-risk__track { flex: 1; }
.perf-risk__fill--high { background: var(--risk-h); }
.perf-risk__fill--medium { background: var(--risk-m); }
.perf-risk__fill--low { background: var(--stable); }
.perf-risk__value { width: 36px; font-size: 12px; font-weight: 700; text-align: right; }
.perf-risk__value--high { color: var(--risk-h); }
.perf-org { font-weight: 700; color: inherit; text-decoration: none; }
.perf-org:hover { text-decoration: underline; }
.perf-org__more { margin-left: 6px; }
.perf-soft { min-width: 150px; font-size: 12px; color: var(--body); }

@media (max-width: 700px) {
  .perf-goals { grid-template-columns: 1fr; }
}