/* Dashboard */
.dashboard-kpi-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 15px;
}
.dashboard-kpi-card {
	flex: 1 1 200px;
	min-width: 140px;
	background: #fff;
	border-radius: 10px;
	padding: 18px 14px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dashboard-kpi-card .kpi-label {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.dashboard-kpi-card .kpi-value {
	font-size: 24px;
	font-weight: 700;
	color: #333;
}
.dashboard-kpi-card.clickable {
	cursor: pointer;
	transition: box-shadow 0.15s, transform 0.15s;
}
.dashboard-kpi-card.clickable:hover {
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}

.dashboard-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: #fff;
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#dashboard_tab_form {
	min-width: 200px;
}
.dashboard-range-toggle,
.dashboard-view-toggle {
	display: flex;
	gap: 4px;
}
.dashboard-range-toggle .btn,
.dashboard-view-toggle .btn {
	font-size: 12px;
	padding: 5px 14px;
	border-radius: 6px;
}

.dashboard-chart-wrapper {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dashboard-chart-container {
	position: relative;
	height: 420px;
}
.dashboard-no-data {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #999;
	font-size: 16px;
}
.dashboard-definition {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #eee;
	font-size: 13px;
	line-height: 1.5;
	color: #666;
}
.dashboard-definition:empty {
	display: none;
}
.dashboard-definition-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #888;
	margin-right: 8px;
}

/* Mobile */
@media (max-width: 768px) {
	.dashboard-kpi-card {
		flex: 1 1 45%;
		padding: 12px 10px;
	}
	.dashboard-kpi-card .kpi-value {
		font-size: 18px;
	}
	.dashboard-controls {
		flex-direction: column;
		align-items: stretch;
	}
	.dashboard-view-toggle {
		justify-content: center;
	}
	.dashboard-chart-container {
		height: 300px;
	}
}
@media (max-width: 480px) {
	.dashboard-kpi-card {
		flex: 1 1 100%;
	}
	.dashboard-chart-container {
		height: 250px;
	}
}

/* Review Thanks photo editor (#299) */
.thanks-edit-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.thanks-edit-tool.is-active {
	background: #1D72F1;
	color: #fff;
	border-color: #1D72F1;
}
.thanks-edit-redact-tools {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	padding-left: 8px;
	border-left: 1px solid #ddd;
}
.thanks-edit-swatch {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #ccc;
	vertical-align: middle;
}
.thanks-edit-swatch.is-active {
	box-shadow: 0 0 0 2px #1D72F1;
}
.thanks-edit-canvas-wrapper {
	position: relative;
	max-height: 60vh;
	background: #000;
	overflow: hidden;
}
.thanks-edit-canvas-wrapper > img {
	max-width: 100%;
	display: block;
}
#thanks_edit_overlay {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 3;
	touch-action: none;
}
@media (max-width: 768px) {
	.thanks-edit-toolbar {
		gap: 6px 8px;
	}
	.thanks-edit-tool {
		padding: 6px 10px;
		font-size: 13px;
	}
	.thanks-edit-redact-tools {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
		flex-wrap: wrap;
		gap: 8px;
	}
	.thanks-edit-swatch {
		width: 32px;
		height: 32px;
	}
	.thanks-edit-canvas-wrapper {
		max-height: 50vh;
		min-height: 220px;
	}
}

/* Admin Dashboard (#529) */
.mapp-dashboard-panel {
	background: #fff;
	padding: 18px;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	margin-bottom: 15px;
}
.mapp-dashboard-panel-title {
	font-size: 18px;
	margin-bottom: 12px;
}
/* Title row -- name + Joined subtitle on left, badges on right */
#my_dashboard_brackets_panel {
	margin-bottom: 15px;
}
.mapp-dashboard-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.mapp-dashboard-title-left {
	flex: 1 1 auto;
	min-width: 0;
}
.mapp-dashboard-title-name {
	font-size: 18px;
}
.mapp-dashboard-title-subtitle {
	margin-top: 2px;
}
.mapp-dashboard-title-subtitle:empty {
	display: none;
}
.mapp-dashboard-title-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
}
.mapp-dashboard-achievement-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 11px;
	background: linear-gradient(135deg, #FFF8E1, #FFECB3);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #5D4037;
}
.mapp-dashboard-achievement-chip.anniversary {
	background: linear-gradient(135deg, #E1F5FE, #B3E5FC);
	color: #01579B;
}
.mapp-dashboard-achievement-chip.streak {
	background: linear-gradient(135deg, #FFE0B2, #FFAB91);
	color: #BF360C;
}
.mapp-dashboard-bracket-tile .font12 {
	margin-top: 6px;
}
.mapp-dashboard-activity-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	font-size: 14px;
}
.mapp-dashboard-activity-row:last-child {
	border-bottom: none;
}
.mapp-dashboard-thank-you-card {
	display: flex;
	gap: 14px;
	align-items: stretch;
	background: #fafafa;
	border-radius: 8px;
	padding: 12px;
	margin-top: 10px;
	color: inherit;
	text-decoration: none;
	transition: background 0.1s, transform 0.1s;
}
.mapp-dashboard-thank-you-card:hover {
	background: #f3f3f3;
	text-decoration: none;
	color: inherit;
	transform: translateY(-1px);
}
.mapp-dashboard-ty-thumb {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	background: #e8e8e8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mapp-dashboard-ty-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mapp-dashboard-ty-thumb-empty,
.mapp-dashboard-ty-thumb-broken {
	background: linear-gradient(135deg, #FFE0B2, #FFCC80);
	color: #fff;
	font-size: 36px;
}
.mapp-dashboard-ty-thumb-broken img {
	display: none;
}
.mapp-dashboard-ty-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.mapp-dashboard-ty-author {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Override the base 30px / 5px radius to match the bigger /give marketing
	card icons. Let the natural square shape + colored backgrounds show
	through -- do not force a circle or override background. */
.mapp-dashboard-ty-author .need-author-pic {
	padding-right: 0;
}
.mapp-dashboard-ty-author .need-author-pic img {
	width: 40px;
	height: 40px;
	border-radius: 6px;
}
.mapp-dashboard-ty-quote {
	font-style: italic;
	margin: 8px 0 0 0;
	line-height: 1.4;
	color: #444;
}
.mapp-dashboard-outstanding-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	cursor: pointer;
	transition: background 0.1s;
}
.mapp-dashboard-outstanding-row:last-child {
	border-bottom: none;
}
.mapp-dashboard-outstanding-row:hover {
	background: rgba(0,0,0,0.02);
}

@media (max-width: 768px) {
	.mapp-dashboard-panel {
		padding: 14px;
	}
	.mapp-dashboard-panel-title {
		font-size: 16px;
	}
	#my_dashboard_map_canvas {
		height: 40vh !important;
		min-height: 280px !important;
	}
	.mapp-dashboard-ty-thumb {
		flex: 0 0 80px;
		width: 80px;
		height: 80px;
	}
	.mapp-dashboard-ty-thumb-empty,
	.mapp-dashboard-ty-thumb-broken {
		font-size: 24px;
	}
}

/* #634: list-row hover styling, moved off inline onmouseover/onmouseout handlers so a strict
   Content-Security-Policy (script-src 'self') can drop 'unsafe-inline'. Resting #fff on the
   search-result rows matches their prior onmouseout state. */
.blog-list-item:hover,
.testimonial-list-item:hover {
	background-color: #f0f4ff;
}
.need-search-result,
.company-search-result {
	background-color: #fff;
}
.need-search-result:hover,
.company-search-result:hover {
	background-color: #f0f4ff;
}

/* #1188: thank-you rating slider (admin.31.thanks-rating.js). One native range
   input mapped onto the discrete THANKS_RATING stops. The accent colour follows
   the stop's group (reject / hide / publish) through one custom property, so the
   track fill, the handle and the active tick all agree without per-browser
   overrides. --mapp-thanks-rating-pct is set inline by the renderer. */
.mapp-thanks-rating {
	--mapp-thanks-rating-accent: #1D72F1;
	--mapp-thanks-rating-pct: 0%;
	--mapp-thanks-rating-tint: rgb(102 102 102 / 5%);
	padding-top: 6px;
}
.mapp-thanks-rating.mapp-thanks-rating-reject {
	--mapp-thanks-rating-accent: #d03939;
	--mapp-thanks-rating-tint: rgb(208 57 57 / 5%);
}
.mapp-thanks-rating.mapp-thanks-rating-hide {
	--mapp-thanks-rating-accent: #b7941e;
	--mapp-thanks-rating-tint: rgb(183 148 30 / 5%);
}
.mapp-thanks-rating.mapp-thanks-rating-publish {
	--mapp-thanks-rating-tint: rgb(108 172 68 / 10%);
}
.mapp-thanks-rating.is-unset {
	--mapp-thanks-rating-accent: #bbbbbb;
}

.mapp-thanks-rating-input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.mapp-thanks-rating-input:focus {
	outline: none;
}
.mapp-thanks-rating-input::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--mapp-thanks-rating-accent) var(--mapp-thanks-rating-pct), #dddddd var(--mapp-thanks-rating-pct));
}
.mapp-thanks-rating-input::-moz-range-track {
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--mapp-thanks-rating-accent) var(--mapp-thanks-rating-pct), #dddddd var(--mapp-thanks-rating-pct));
}
.mapp-thanks-rating-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	margin-top: -10px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--mapp-thanks-rating-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.mapp-thanks-rating-input::-moz-range-thumb {
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--mapp-thanks-rating-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.mapp-thanks-rating.is-unset .mapp-thanks-rating-input::-webkit-slider-thumb {
	border-style: dashed;
}
.mapp-thanks-rating.is-unset .mapp-thanks-rating-input::-moz-range-thumb {
	border-style: dashed;
}
.mapp-thanks-rating-input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgb(29 114 241 / 25%);
}
.mapp-thanks-rating-input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px rgb(29 114 241 / 25%);
}

/* Tick labels sit under the handle's centre at each stop: the handle travels
   from half its width in from the left edge to half its width in from the
   right, so the row is padded by that same 14px and the zero-width ticks are
   spread evenly between. */
.mapp-thanks-rating-ticks {
	display: flex;
	justify-content: space-between;
	padding: 0 14px;
	margin-top: -4px;
}
.mapp-thanks-rating-tick {
	display: flex;
	justify-content: center;
	width: 0;
	cursor: pointer;
	user-select: none;
}
.mapp-thanks-rating-tick span {
	padding: 4px 6px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 14px;
	color: #888;
	white-space: nowrap;
}
.mapp-thanks-rating-tick:hover span {
	background: rgb(0 0 0 / 5%);
}
.mapp-thanks-rating-tick.is-active span {
	color: var(--mapp-thanks-rating-accent);
	font-weight: 700;
}

/* The live main line + description. min-height keeps the page from jumping as
   the copy length changes under the handle. */
.mapp-thanks-rating-panel {
	min-height: 104px;
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 10px;
	border-left: 5px solid var(--mapp-thanks-rating-accent);
	background: var(--mapp-thanks-rating-tint);
}
.mapp-thanks-rating-action {
	font-size: 0.8em;
	line-height: 18px;
	margin-bottom: 4px;
}
.mapp-thanks-rating-action:empty {
	display: none;
}
.mapp-thanks-rating-title {
	margin-bottom: 4px;
}
.mapp-thanks-rating-text {
	font-size: 0.8em;
}