/* =====================================================================
   REPORTS - STYLES  (Module #9)
   ---------------------------------------------------------------------
   New structures only (.rp-*). Everything else is inherited from the
   design system + the shared Executive Command Center classes
   (.mc-* section shell, .c3-* nav/kpis/two-column, .ds-* primitives) so
   Reports reads as the same product as Command Center and Sales.
   Theme-aware via tokens; no hard-coded colors.
   ===================================================================== */

.rp { display: flex; flex-direction: column; gap: var(--sp-6); }

/* ---------- header + role toggle ---------- */
.rp-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.rp-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.rp-roles { flex-wrap: wrap; }

/* ---------- filter + export bar ---------- */
.rp-filters {
  display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4); border: 1px solid var(--ds-hairline);
  border-radius: var(--r-lg); background: var(--ds-surface-1); box-shadow: var(--el-1);
}
.rp-filter { display: flex; flex-direction: column; gap: 5px; }
.rp-filter > span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-lo); }
.ds-select--sm { min-height: 38px; padding: 8px 12px; font-size: var(--fs-sm); min-width: 150px; }
.rp-filters__spacer { flex: 1 1 auto; }
.rp-export { display: flex; gap: var(--sp-2); align-self: flex-end; }

/* ---------- executive story strip (facts vs AI) ---------- */
.rp-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.rp-story__col {
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--ds-surface-1); border: 1px solid var(--ds-hairline);
}
.rp-story__col--fact { border-left: 3px solid var(--ds-positive); }
.rp-story__k { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-lo); margin-bottom: var(--sp-2); }
.rp-story__k em { font-style: normal; color: var(--ds-positive); font-weight: 700; }
.rp-story__k--ai { color: var(--ds-accent); }
.rp-story__col p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ds-text); }

/* ---------- launch report cards ---------- */
.rp-launches { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); }
.rp-launch {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); box-shadow: var(--el-1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.rp-launch:hover { transform: translateY(-2px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-2); }
.rp-launch__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.rp-launch__name { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); }
.rp-launch__campaign { font-size: var(--fs-xs); color: var(--ds-text-lo); letter-spacing: 0.02em; }
.rp-lstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
.rp-stat { display: flex; flex-direction: column; gap: 2px; }
.rp-stat__k { font-size: var(--fs-xs); color: var(--ds-text-lo); letter-spacing: 0.02em; }
.rp-stat__v { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--ds-text-hi); font-variant-numeric: tabular-nums; }
.rp-goal { display: flex; flex-direction: column; gap: var(--sp-2); }
.rp-goal__head { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-sm); }
.rp-goal__head span { color: var(--ds-accent); font-weight: 600; }
.rp-goal__head strong { color: var(--ds-text-lo); font-weight: 500; font-variant-numeric: tabular-nums; }
.rp-launch__read { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--ds-text-lo); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------- bar rows (funnel / channel / benchmark) ---------- */
.rp-bar { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2.4fr auto; align-items: center; gap: var(--sp-3); padding: 7px 0; }
.rp-bar__label { font-size: var(--fs-sm); color: var(--ds-text); }
.rp-bar__label em { font-style: normal; color: var(--ds-text-lo); font-variant-numeric: tabular-nums; }
.rp-bar__track { height: 8px; border-radius: var(--r-pill); background: var(--ds-overlay-2); overflow: hidden; }
.rp-bar__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ds-hairline-strong); transition: width var(--dur-3) var(--ease); }
.rp-bar__fill--gold { background: linear-gradient(90deg, var(--ds-gold-500), var(--ds-gold-300)); box-shadow: 0 0 10px var(--ds-glow); }
.rp-bar__fill--ok { background: var(--ds-positive); }
.rp-bar__fill--risk { background: var(--ds-danger); }
.rp-bar__val { font-size: var(--fs-sm); font-weight: 600; color: var(--ds-text-lo); font-variant-numeric: tabular-nums; text-align: right; min-width: 52px; }

/* ---------- revenue block ---------- */
.rp-revhead { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.rp-revhead__v { display: inline-block; margin: 6px var(--sp-3) 0 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ds-text-hi); }
.rp-spark { margin: var(--sp-3) 0 var(--sp-4); }
.rp-subhead { margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--ds-text-hi); }
.rp-subhead__note { font-weight: 400; color: var(--ds-text-mute); font-size: var(--fs-xs); }

/* ---------- people list (lead & client) ---------- */
.rp-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rp-person { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); cursor: pointer; transition: border-color var(--dur-2) var(--ease), background var(--dur-1) var(--ease); }
.rp-person:hover { border-color: var(--ds-hairline-strong); background: var(--ds-overlay); }
.rp-person--static { cursor: default; }
.rp-person--static:hover { border-color: var(--ds-hairline); background: var(--ds-surface-1); }
.rp-person__badge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(212,175,55,0.12); color: var(--ds-accent); font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0; }
.rp-person__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-person__name { font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.rp-person__name em { font-style: normal; font-size: var(--fs-xs); color: var(--ds-text-mute); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 6px; }
.rp-person__na { font-size: var(--fs-sm); color: var(--ds-text-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-person__meta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.rp-person__like { font-size: var(--fs-xs); color: var(--ds-text-lo); font-variant-numeric: tabular-nums; }
.rp-health, .rp-person .rp-health { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-person__chev { color: var(--ds-text-mute); font-size: 1.3rem; line-height: 1; }

/* ---------- approval metrics ---------- */
.rp-chiprow { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.rp-metric { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.rp-metric__n { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); }
.rp-metric__k { font-size: var(--fs-xs); color: var(--ds-text-lo); letter-spacing: 0.02em; }
.rp-metric--positive .rp-metric__n { color: var(--ds-positive); }
.rp-metric--danger .rp-metric__n { color: var(--ds-danger-strong); }

.rp-approvals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rp-appr { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.rp-appr--over { border-color: color-mix(in srgb, var(--ds-danger) 34%, transparent); background: var(--ds-danger-soft); }
.rp-appr__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-appr__title { font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.rp-appr__why { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.rp-appr__side { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.rp-appr__due { font-size: var(--fs-xs); color: var(--ds-text-lo); white-space: nowrap; }
.rp-appr__due strong { color: var(--ds-danger-strong); }

/* ---------- activity timeline ---------- */
.rp-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.rp-activity__i { display: flex; gap: var(--sp-3); align-items: flex-start; }
.rp-activity__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--ds-hairline-strong); flex-shrink: 0; }
.rp-activity--signal .rp-activity__dot { background: var(--ds-gold-500); box-shadow: 0 0 8px var(--ds-glow); }
.rp-activity--risk .rp-activity__dot { background: var(--ds-danger); }
.rp-activity__t { display: block; font-size: var(--fs-sm); color: var(--ds-text); }
.rp-activity__t strong { color: var(--ds-text-hi); }
.rp-activity__w { font-size: var(--fs-xs); color: var(--ds-text-mute); }

/* ---------- tasks ---------- */
.rp-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rp-task { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.rp-task__check { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--ds-hairline-strong); flex-shrink: 0; }
.rp-task__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rp-task__title { font-weight: 500; color: var(--ds-text-hi); font-size: var(--fs-base); }
.rp-task__meta { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.rp-task__owner { font-size: var(--fs-xs); font-weight: 600; color: var(--ds-accent); flex-shrink: 0; }

/* ---------- follow-up queue ---------- */
.rp-fulist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.rp-fu { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); cursor: pointer; transition: border-color var(--dur-2) var(--ease); }
.rp-fu:hover { border-color: var(--ds-hairline-strong); }
.rp-fu__name { font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); min-width: 120px; }
.rp-fu__na { flex: 1 1 auto; font-size: var(--fs-sm); color: var(--ds-text-lo); }
.rp-fu__chan { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ds-accent); font-weight: 600; }

/* ---------- notes / footer ---------- */
.rp-note { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ds-text-lo); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); }
.rp-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); color: var(--ds-text-mute); text-align: center; }

/* ---------- tight kpi variant (sales sub-block) ---------- */
.c3-kpis--tight { margin-bottom: var(--sp-4); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .rp-story { grid-template-columns: 1fr; }
  .rp-launches { grid-template-columns: 1fr; }
  .rp-bar { grid-template-columns: minmax(90px, 1fr) 2fr auto; }
}
@media (max-width: 560px) {
  .rp-head__top { flex-direction: column; }
  .rp-filter, .ds-select--sm { width: 100%; }
  .rp-filters__spacer { display: none; }
  .rp-export { width: 100%; }
  .rp-export .ds-btn { flex: 1 1 auto; }
  .rp-lstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- print - export as clean PDF ---------- */
@media print {
  .sidebar, .topbar, .sidebar-backdrop, .rp-filters, .c3-nav, .rp-roles, .rp-export { display: none !important; }
  .app-main, .app-content, #viewRoot { margin: 0 !important; padding: 0 !important; }
  .rp-launch, .mc-section, .ds-insight { break-inside: avoid; box-shadow: none !important; }
  .rp { gap: 16px; }
}