/* ============================================================
   Reporting capability — page-specific styles
   Layered on top of bento.css's shared sample-panel chrome
   (.vita-cap-sample, __bar, __kpi, __chart-card, __activity, etc.).
   Scoped to body.vita-service--reporting or the .vita-cap-rep-* namespace.
   ============================================================ */

/* ── KPI row: collapse to 3 columns on Reporting (we keep all 3 KPIs
      visible at mobile, unlike Operations which hides the 3rd) ───── */
body.vita-service--reporting .vita-cap-sample__kpis {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 719.98px) {
	body.vita-service--reporting .vita-cap-sample__kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
	body.vita-service--reporting .vita-cap-sample__kpi { padding: 8px 10px; }
	body.vita-service--reporting .vita-cap-sample__kpi:nth-child(3) { display: block; }
	body.vita-service--reporting .vita-cap-sample__kpi-v { font-size: 1.05rem; }
}

/* ── Vertical bars chart ────────────────────────────────────────── */

/* The bars chart sits inside the existing .vita-cap-sample__chart-card
   shell. We mirror the chart's 90px height but adjust on small screens. */
.vita-cap-rep-chart {
	width: 100%;
	height: 110px;
	display: block;
}
@media (max-width: 719.98px) {
	.vita-cap-rep-chart { height: 80px; }
}

.vita-cap-rep-bar {
	fill: var(--cap-accent, #FFE4D4);
	opacity: 0.72;
	transition: opacity 120ms ease, fill 120ms ease;
	cursor: pointer;
}
.vita-cap-rep-bar:hover { opacity: 1; }
.vita-cap-rep-bar.is-latest {
	opacity: 1;
	animation: vita-cap-rep-pulse 2.4s ease-in-out infinite;
}
.vita-cap-rep-bar.is-avg {
	fill: #ffffff;
	opacity: 0.45;
}
.vita-cap-rep-bar.is-avg:hover { opacity: 0.85; }

@keyframes vita-cap-rep-pulse {
	0%, 100% { opacity: 0.78; }
	50%      { opacity: 1; }
}

/* ── Overview: "vs last period" diff strip ──────────────────────── */

.vita-cap-rep-diffstrip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 4px;
}
.vita-cap-rep-diff {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 8px 10px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label  delta"
		"value  delta";
	column-gap: 8px;
	row-gap: 1px;
	align-items: center;
	min-width: 0;
}
.vita-cap-rep-diff__l {
	grid-area: label;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}
.vita-cap-rep-diff__v {
	grid-area: value;
	font-family: var(--wp--preset--font-family--sans);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.015em;
}
.vita-cap-rep-diff__d {
	grid-area: delta;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 10px;
	color: var(--cap-accent, #FFE4D4);
	white-space: nowrap;
	align-self: center;
}
.vita-cap-rep-diff.is-down .vita-cap-rep-diff__d {
	color: #FFB892;
}
@media (max-width: 480px) {
	.vita-cap-rep-diff { padding: 7px 8px; }
	.vita-cap-rep-diff__v { font-size: 12px; }
	.vita-cap-rep-diff__d { font-size: 9px; }
}

/* ── Revenue view: breakdown rows (label + bar + value) ─────────── */

.vita-cap-sample__view--revenue { display: flex; flex-direction: column; gap: 14px; }

.vita-cap-rep-breakdown { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.vita-cap-rep-bkrow {
	display: grid;
	grid-template-columns: 140px 1fr 60px;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 8px 14px;
}
.vita-cap-rep-bkrow__l {
	font-family: var(--wp--preset--font-family--sans);
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
}
.vita-cap-rep-bkrow__track {
	height: 8px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 999px;
	overflow: hidden;
	display: block;
}
.vita-cap-rep-bkrow__fill {
	display: block;
	height: 100%;
	background: var(--cap-accent, #FFE4D4);
	border-radius: 999px;
}
.vita-cap-rep-bkrow__v {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 12px;
	color: #fff;
	text-align: right;
}
@media (max-width: 719.98px) {
	.vita-cap-rep-bkrow { grid-template-columns: 1fr 56px; grid-template-areas: "label value" "track track"; row-gap: 6px; }
	.vita-cap-rep-bkrow__l { grid-area: label; }
	.vita-cap-rep-bkrow__v { grid-area: value; }
	.vita-cap-rep-bkrow__track { grid-area: track; }
}

/* ── Jobs view: horizontal-bar rows by category ─────────────────── */

.vita-cap-sample__view--jobs { display: flex; flex-direction: column; gap: 6px; }

.vita-cap-rep-jobs { display: flex; flex-direction: column; gap: 6px; }

.vita-cap-rep-jobrow {
	display: grid;
	grid-template-columns: 80px 1fr 60px 70px;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 10px 14px;
}
.vita-cap-rep-jobrow__name {
	font-family: var(--wp--preset--font-family--sans);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}
.vita-cap-rep-jobrow__track {
	display: block;
	height: 10px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 999px;
	overflow: hidden;
	min-width: 0;
}
.vita-cap-rep-jobrow__fill {
	display: block;
	height: 100%;
	background: var(--cap-accent, #FFE4D4);
	border-radius: 999px;
}
.vita-cap-rep-jobrow__amt {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 12px;
	color: #fff;
	text-align: right;
}
.vita-cap-rep-jobrow__ct {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-align: right;
}
/* Rule 7 — at <720, the horizontal bars stack: bar on its own row above the values */
@media (max-width: 719.98px) {
	.vita-cap-rep-jobrow {
		grid-template-columns: 1fr auto auto;
		grid-template-areas:
			"name  amt   ct"
			"track track track";
		row-gap: 6px;
		padding: 8px 12px;
	}
	.vita-cap-rep-jobrow__name  { grid-area: name; }
	.vita-cap-rep-jobrow__amt   { grid-area: amt; }
	.vita-cap-rep-jobrow__ct    { grid-area: ct; }
	.vita-cap-rep-jobrow__track { grid-area: track; }
}

/* ── Sources view: donut + legend ───────────────────────────────── */

.vita-cap-sample__view--sources { display: flex; flex-direction: column; gap: 12px; }

.vita-cap-rep-sources {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 22px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	padding: 18px;
}

.vita-cap-rep-donut {
	width: 160px;
	height: 160px;
	display: block;
}
.vita-cap-rep-donut__seg {
	transition: opacity 160ms ease;
}
.vita-cap-rep-donut__seg:hover { opacity: 0.8; }
.vita-cap-rep-donut__centre {
	fill: #fff;
	font-family: var(--wp--preset--font-family--sans, ui-sans-serif, system-ui);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.vita-cap-rep-donut__centresub {
	fill: rgba(255, 255, 255, 0.5);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vita-cap-rep-legendlist {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.vita-cap-rep-legend {
	display: grid;
	grid-template-columns: 10px 1fr auto auto;
	gap: 10px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	min-width: 0;
}
.vita-cap-rep-legend:last-child { border-bottom: 0; }
.vita-cap-rep-legend__sw {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	display: block;
}
.vita-cap-rep-legend__name {
	font-family: var(--wp--preset--font-family--sans);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
}
.vita-cap-rep-legend__pct {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
}
.vita-cap-rep-legend__v {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 11px;
	color: #fff;
	min-width: 44px;
	text-align: right;
}
@media (max-width: 719.98px) {
	.vita-cap-rep-sources { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
	.vita-cap-rep-donut { width: 130px; height: 130px; margin: 0 auto; }
}

/* ── Recipients view ────────────────────────────────────────────── */

.vita-cap-sample__view--saved { display: flex; flex-direction: column; gap: 6px; }

.vita-cap-rep-saved { display: flex; flex-direction: column; gap: 6px; }

.vita-cap-rep-saved-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 10px 14px;
}

.vita-cap-rep-saved-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vita-cap-rep-saved-row__name {
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vita-cap-rep-saved-row__meta {
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 10px;
	letter-spacing: 0.04em;
}
.vita-cap-rep-saved-row__tag {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cap-accent) 15%, transparent);
	color: var(--cap-accent, #FFE4D4);
	white-space: nowrap;
}
.vita-cap-rep-saved-row__tag[data-tag="revenue"]   { background: color-mix(in srgb, var(--cap-accent) 22%, transparent); color: #fff; }
.vita-cap-rep-saved-row__tag[data-tag="ops"]       { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); }
.vita-cap-rep-saved-row__tag[data-tag="sales"]     { background: rgba(255, 184, 146, 0.18); color: #FFB892; }
.vita-cap-rep-saved-row__tag[data-tag="customers"] { background: color-mix(in srgb, var(--cap-accent) 15%, transparent); color: var(--cap-accent, #FFE4D4); }
.vita-cap-rep-saved-row__tag[data-tag="finance"]   { background: rgba(217, 83, 30, 0.2); color: #FFCAA8; }

.vita-cap-rep-saved-row__run {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 11px;
	letter-spacing: 0.04em;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cap-app-accent, var(--cap-accent, #FF8847));
	color: var(--cap-app-accent-text, #ffffff);
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: transform 120ms ease, background 120ms ease;
	white-space: nowrap;
}
.vita-cap-rep-saved-row__run:hover { transform: translateY(-1px); }
.vita-cap-rep-saved-row__run:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* On narrow viewports collapse the action below the metadata. */
@media (max-width: 599.98px) {
	.vita-cap-rep-saved-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.vita-cap-rep-saved-row__run {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* ── Activity dots — re-tint to peach for Reporting ─────────────── */

/* The live dot would normally inherit amber from --cap-app-accent on this
   page, which collides visually with the warn dot. Force live = mint, warn
   = caution amber so "fresh / lag / stale" reads at a glance. */
body.vita-service--reporting .vita-cap-sample__dot--warn {
	background: #FFCB57;
	box-shadow: 0 0 0 4px rgba(255, 203, 87, 0.18);
}
body.vita-service--reporting .vita-cap-sample__dot--live {
	background: var(--cap-accent, #FFE4D4);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--cap-accent) 18%, transparent);
}

/* The activity __amt for Sent Reports holds "Open" (an action label),
   not a dollar value. Brighten it so it reads as a link. */
body.vita-service--reporting .vita-cap-sample__activity-amt {
	color: var(--cap-accent, #FFE4D4);
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

/* ── Nav active state — tint mint accent away to peach for reporting */

body.vita-service--reporting .vita-cap-sample__nav-item.is-on {
	background: color-mix(in srgb, var(--cap-accent) 12%, transparent);
	color: var(--cap-accent, #FFE4D4);
}
body.vita-service--reporting .vita-cap-sample__nav-item:hover {
	background: color-mix(in srgb, var(--cap-accent) 6%, transparent);
}

/* ── Promise glyphs — new variants ──────────────────────────────── */

/* --doc: a small 3-line document with a branding bar at the top */
.vita-cap-promise__glyph--doc {
	width: 84px;
	height: 100px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 6px;
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	position: relative;
}
.vita-cap-promise__glyph--doc::before {
	content: "";
	display: block;
	height: 8px;
	border-radius: 2px;
	background: var(--cap-bg, #FF8847);
	margin-bottom: 4px;
}
.vita-cap-promise__glyph--doc span {
	display: block;
	height: 5px;
	border-radius: 99px;
	background: rgba(15, 27, 45, 0.18);
}
.vita-cap-promise__glyph--doc span:nth-child(1) { width: 80%; }
.vita-cap-promise__glyph--doc span:nth-child(2) { width: 60%; }
.vita-cap-promise__glyph--doc span:nth-child(3) { width: 70%; }

/* --query: a small search-input bar with a leading magnifier + blinking
   caret, reading as "type a question, get an answer." Replaces the old
   --clock glyph (the BI page no longer talks about scheduled cadences). */
.vita-cap-promise__glyph--query {
	width: 100%;
	max-width: 220px;
	height: 44px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 14px 0 38px;
}
/* Magnifier glyph at the left, drawn with a ring + handle pseudo-element */
.vita-cap-promise__glyph--query::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border: 2px solid var(--cap-bg, #FF8847);
	border-radius: 50%;
	box-shadow: 5px 5px 0 -2.5px var(--cap-bg, #FF8847); /* handle drawn as offset shadow */
}
/* Caret line + faux placeholder text */
.vita-cap-promise__glyph--query::after {
	content: "revenue by team";
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: 11px;
	color: rgba(15, 27, 45, 0.55);
	letter-spacing: -0.01em;
}

/* ── Make sure the peach-accent vars are read inside the inset
      ink chart card on the Sources view's legend label too ────── */
body.vita-service--reporting .vita-cap-sample__chart-points circle {
	fill: var(--cap-accent, #FFE4D4);
}

/* ── Hide pulse on first paint for non-current views to avoid
      animation overhead — purely defensive. ─────────────────── */
.vita-cap-sample__view[hidden] .vita-cap-rep-bar.is-latest {
	animation: none;
}