/* ===================================================================
   3D WEALTH DIGITAL TOOLBOX - SCORECARD STYLES
   Specific styles for the 3D Scorecard tool
   =================================================================== */

/* ===================================================================
   PRINCIPLE ROW & COLUMNS
   =================================================================== */
:root {
	/*--poor-color: #DC3545;*/
	--poor-rgb: 220, 53, 69;
	--fair-rgb: 253, 126, 20;
	--good-rgb: 255, 193, 7;
	--better-rgb: 23, 162, 184;
	--best-rgb: 40, 167, 69;
	--group-even-bg: rgba(var(--bs-primary-rgb), 0.07);
	--group-separator: 3px solid var(--bs-border-color);
	/* Group row border system */
	--group-outer-border: 3px solid var(--bs-border-color-translucent);
	--group-outer-border-even: 3.5px solid var(--bs-primary-border-subtle);
	--group-inner-border: 1px solid var(--bs-border-color);
	--group-score-separator: 1.5px solid var(--bs-border-color-translucent);
}

.principle-row {
	transition: background-color 0.2s ease;
}

.principle-header {
	min-width: 9em;
}

.principle-column {
	width: 15.25%;
}

.principle-column-score {
	width: 9%;
}

[data-key-principle] {
	font-size: 20px;
}

[data-objective] {
	font-size: 15px;
}

.bg-poor {
	background-color: rgb(var(--poor-rgb)) !important;
}

.bg-poor-10 {
	background-color: rgba(var(--poor-rgb),.1) !important;
}

.bg-fair {
	background-color: rgb(var(--fair-rgb)) !important;
}

.bg-fair-10 {
	background-color: rgba(var(--fair-rgb),.1) !important;
}

.bg-good {
	background-color: rgb(var(--good-rgb)) !important;
}

.bg-good-10 {
	background-color: rgba(var(--good-rgb),.1) !important;
}

.bg-better {
	background-color: rgb(var(--better-rgb)) !important;
}

.bg-better-10 {
	background-color: rgba(var(--better-rgb),.1) !important;
}

.bg-best {
	background-color: rgb(var(--best-rgb)) !important;
}

.bg-best-10 {
	background-color: rgba(var(--best-rgb),.1) !important;
}

.rounded-top-left-1-5 {
	border-top-left-radius: 1.5rem !important;
}

.rounded-top-right-1-5 {
	border-top-right-radius: 1.5rem !important;
}

/* ===================================================================
   SCORE DISPLAY
   =================================================================== */
.score-display {
	text-align: center;
	margin-top: 0.5rem;
}

	.score-display strong {
		display: block;
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--bs-primary);
	}

.present-score,
.future-score {
	font-weight: 600;
	font-size: 1.1rem;
}

.present-score {
	color: var(--present-color);
}

.future-score {
	color: var(--future-color);
}

/* ===================================================================
   SLIDER LAYOUT
   =================================================================== */
.slider-row {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	line-height: 1;
	vertical-align: middle;
}

.slider-cell {
	padding: 0 !important;
	position: relative;
}

	.slider-cell:has(.present-slider) {
		padding-top: 1.25% !important;
		border: 2px solid var(--bs-border-color);
	}

	.slider-cell:has(.future-slider) {
		padding-bottom: 1.25% !important;
		border: 2px solid var(--bs-border-color);
	}

tr:first-child .slider-cell:has(.present-slider) {
	padding-top: 0 !important;
}

tr:last-child .slider-cell:has(.future-slider) {
	padding-bottom: 0 !important;
}

.slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ===================================================================
   RANGE INPUT SLIDERS
   =================================================================== */
input[type="range"] {
	position: relative;
	width: 100%;
	height: 30px;
	background: rgba(0,0,0,.15);
	cursor: pointer;
	margin: 0;
	padding: 0;
}

/* accent-color controls the track fill on mobile browsers (Chrome Android,
   iOS Safari) that don't fully honour the webkit pseudo-element track styles.
   Must be on the element itself (not a pseudo-element). */
input[type="range"].present-slider {
	accent-color: var(--present-color, #4580AD);
}

input[type="range"].future-slider {
	accent-color: var(--future-color, #2d8659);
}

	/* Webkit (Chrome, Safari, Edge) Slider Track */
	input[type="range"]::-webkit-slider-runnable-track {
		height: 2px;
	}

	input[type="range"].present-slider::-webkit-slider-track {
		background: rgba(var(--present-rgb),.2);
	}

	input[type="range"].future-slider::-webkit-slider-track {
		background: rgb(var(--future-rgb),.2);
	}

	/* Webkit Slider Thumb - Present (Blue) */
	input[type="range"].present-slider::-webkit-slider-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--present-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].present-slider:active::-webkit-slider-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Webkit Slider Thumb - Future (Green) */
	input[type="range"].future-slider::-webkit-slider-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--future-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].future-slider:active::-webkit-slider-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Firefox Slider Track */
	input[type="range"]::-moz-range-track {
		height: 8px;
	}

	input[type="range"].present-slider::-moz-range-track {
		background: rgba(var(--present-rgb),.2);
	}

	input[type="range"].future-slider::-moz-range-track {
		background: rgb(var(--future-rgb),.2);
	}

	/* Firefox Slider Thumb - Present (Blue) */
	input[type="range"].present-slider::-moz-range-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--present-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].present-slider:active::-moz-range-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Firefox Slider Thumb - Future (Green) */
	input[type="range"].future-slider::-moz-range-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--future-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].future-slider:active::-moz-range-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Focus styles */
	input[type="range"]:focus {
		outline: none;
	}

		input[type="range"]:focus::-webkit-slider-thumb {
			box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
		}

		input[type="range"]:focus::-moz-range-thumb {
			box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
		}

/* ===================================================================
   TOTAL SCORE DISPLAY
   =================================================================== */
#totalPresentScore,
#totalFutureScore {
	font-size: 2rem;
	font-weight: 700;
}

#totalPresentScore,
#finalPresentScore {
	color: var(--present-color);
}

#totalFutureScore,
#finalFutureScore {
	color: var(--future-color);
}

#finalPresentScore,
#finalFutureScore {
	font-weight: 700;
	margin: 1rem 0;
}

/* Progress Bars in Results */
#presentProgressBar,
#futureProgressBar {
	font-size: 0.9rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: width 1s ease-out;
}

/* ===================================================================
   RESPONSIVE DESIGN - TABLET (≤ 991px)
   =================================================================== */
@media (max-width: 991.98px) {
	thead tr th {
		font-size: 0.8rem;
		padding: 0.5rem 0.35rem;
	}

	[data-key-principle] { font-size: 17px; }
	[data-objective]     { font-size: 13px; }

	.slider-type-label { font-size: 1rem; }

	/* Bigger touch targets on tablets */
	input[type="range"] { height: 36px; }

	#totalPresentScore,
	#totalFutureScore {
		font-size: 1.5rem;
	}
}

/* ===================================================================
   RESPONSIVE DESIGN - MOBILE PHONE (≤ 767px)
   Card-per-principle layout:
     • description row  → principle name full-width (score columns hidden)
     • present row      → flex: label | slider | score
     • future row       → flex: label | slider | score
   =================================================================== */
@media (max-width: 767.98px) {

	/* ── Flatten table structure to block ──────────────────────────── */
	#scorecardTable .table,
	#scorecardTable .table > tbody,
	#scorecardTable .table > tfoot {
		display: block;
		width: 100%;
	}

	/* ── Score range header: scrollable strip at top of scoring table ── */
	#scorecardTable .table > thead {
		display: block !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#scorecardTable .table > thead::-webkit-scrollbar { display: none; }

	#scorecardTable .table > thead > tr {
		display: flex !important;
		flex-wrap: nowrap;
	}

	/* Remove sticky positioning on mobile – header scrolls with its own container */
	#scorecardTable .table > thead > tr > th {
		position: static !important;
		z-index: auto !important;
	}

	/* Hide Key Principle and Score columns from header strip */
	#scorecardTable .table > thead > tr > th:first-child,
	#scorecardTable .table > thead > tr > th:last-child {
		display: none !important;
	}

	/* Each score-range column: ~2 visible at a time */
	#scorecardTable .table > thead > tr > th.principle-column {
		flex: 0 0 calc(50% - 1px);
		min-width: 100px;
		font-size: 0.8rem;
		padding: 0.4rem 0.5rem;
		text-align: center;
	}

	/* Every row is a full-width block by default */
	#scorecardTable .table > tbody > tr,
	#scorecardTable .table > tfoot > tr {
		display: block;
		width: 100%;
	}

	/* Every cell defaults to full-width block */
	#scorecardTable .table > tbody > tr > td,
	#scorecardTable .table > tfoot > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* ── Hide score description columns (Poor/Fair/Good/Better/Best) ── */
	/* Slider value still communicates the score; descriptions clutter  */
	/* small screens. Users can rotate to landscape for full table.     */
	td.score-cell,
	td.description-score-cell {
		display: none !important;
	}

	/* ── Principle name cell ────────────────────────────────────────── */
	.principle-name-cell {
		text-align: left !important;
		padding: 0.7rem 0.875rem !important;
		border-bottom: 1px solid var(--bs-border-color) !important;
	}

	[data-key-principle] { font-size: 16px; }
	[data-objective]     { font-size: 13px; }

	/* ── Mobile score description: hidden (descriptions now shown in scroll) ── */
	.mobile-score-desc { display: none !important; }

	/* ── Mobile description scroll: visible on phones ───────────────── */
	.mobile-desc-scroll-wrapper {
		display: block !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-top: 0.5rem;
		/* Full-bleed to card edges */
		margin-left: -0.875rem;
		margin-right: -0.875rem;
	}
	.mobile-desc-scroll-wrapper::-webkit-scrollbar { display: none; }

	.mobile-desc-scroll-container {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.25rem;
		padding: 0 0.5rem;
	}

	.mobile-desc-card {
		flex: 0 0 calc(50% - 0.375rem);
		min-width: calc(50% - 0.375rem);
		padding: 0.5rem 0.4rem;
		border-radius: 4px;
		font-size: 0.82rem;
		text-align: center;
		line-height: 1.4;
		font-weight: 600;
		color: var(--bs-body-color);
	}

	/* ── Review table mobile: 2-column layout (name+desc | score) ───── */
	#reviewScorecardTable .table,
	#reviewScorecardTable .table > tbody,
	#reviewScorecardTable .table > tfoot {
		display: block;
		width: 100%;
	}

	/* Thead: flex, keep only first + last columns */
	#reviewScorecardTable .table > thead > tr {
		display: flex !important;
	}
	#reviewScorecardTable .table > thead > tr > th {
		position: static !important;
		z-index: auto !important;
	}
	#reviewScorecardTable .table > thead > tr > th:not(:first-child):not(:last-child) {
		display: none !important;
	}
	#reviewScorecardTable .table > thead > tr > th:first-child {
		flex: 1;
	}
	#reviewScorecardTable .table > thead > tr > th:last-child {
		flex: 0 0 7rem;
		min-width: 7rem;
	}

	/* Tbody rows: flex with principle name (+ desc) on left, scores on right */
	#reviewScorecardTable .table > tbody > tr {
		display: flex !important;
		width: 100%;
		align-items: stretch;
		border-bottom: 1px solid var(--bs-border-color);
	}
	#reviewScorecardTable .table > tbody > tr > td.principle-name-cell {
		display: block !important;
		flex: 1;
		text-align: left !important;
		padding: 0.6rem 0.75rem !important;
		border: none !important;
	}
	#reviewScorecardTable .table > tbody > tr > td.principle-column-score {
		display: flex !important;
		flex: 0 0 7rem;
		min-width: 7rem;
		border: none !important;
		border-left: 1px solid var(--bs-border-color) !important;
	}

	/* Tfoot */
	#reviewScorecardTable .table > tfoot > tr {
		display: flex !important;
	}
	#reviewScorecardTable .table > tfoot > tr > td:first-child {
		display: flex !important;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		font-size: 1rem;
		border: none !important;
		padding-right: 0.75rem !important;
	}
	#reviewScorecardTable .table > tfoot > tr > td:last-child {
		display: block !important;
		flex: 0 0 7rem;
		min-width: 7rem;
		border: none !important;
	}

	/* Mobile review description cards (built by JS inside principle-name-cell) */
	.mobile-review-desc-wrapper {
		display: block !important;
		margin-top: 0.4rem;
	}

	.mobile-review-desc-card {
		padding: 0.4rem 0.5rem;
		border-radius: 4px;
		font-size: 0.78rem;
		line-height: 1.35;
		font-weight: 600;
		color: var(--bs-body-color);
		margin-top: 0.25rem;
	}

	.mobile-review-labels {
		margin-bottom: 0.2rem;
	}

	.mobile-review-type {
		font-size: 0.65rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.mobile-review-sep {
		font-size: 0.65rem;
		color: var(--bs-secondary);
		margin: 0 0.15rem;
	}

	/* ── Slider rows: single flex line (label | track | score) ──────── */
	/* flex-start so the description below the slider doesn't force the  */
	/* label/score to mis-center relative to a taller slider-cell.       */
	#scorecardTable tr.slider-row {
		display: flex !important;
		align-items: flex-start;
	}

	/* Shared reset for all td flex-items */
	#scorecardTable tr.slider-row > td {
		display: block !important;
		width: auto !important;
		padding: 0.35rem 0.4rem !important;
		border: none !important;
	}

	/* Label cell – uses a more-specific selector (b=2) to beat the td   */
	/* rule above (b=1) so the padding-top override actually takes effect */
	#scorecardTable tr.slider-row > .slider-label-cell {
		flex: 0 0 5rem;
		min-width: unset !important;
		padding-top: 0.9rem !important; /* pushes text down to align with thumb */
	}

	.slider-type-label { font-size: 0.85rem; }

	/* Slider track cell */
	#scorecardTable tr.slider-row > .slider-cell {
		flex: 1 1 auto !important;
	}

	/* Score display cell */
	#scorecardTable tr.slider-row > .score-total-cell {
		flex: 0 0 2.75rem;
		min-width: unset !important;
		text-align: center !important;
		padding-top: 0.85rem !important; /* aligns number with thumb center */
	}

	#scorecardTable .score-total-cell .present-score,
	#scorecardTable .score-total-cell .future-score {
		font-size: 1.25rem !important;
	}

	/* ── Per-group outer borders ─────────────────────────────────────── */

	/* Top border: set on the principle-name td (only visible cell in that row) */
	#scorecardTable tr.principle-group-top > td {
		border-top: var(--group-outer-border) !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: var(--group-inner-border) !important;
	}

	#scorecardTable tr.group-even.principle-group-top > td {
		border-top: var(--group-outer-border-even) !important;
	}

	/* Bottom border: set on the tr (flex container) so it spans the     */
	/* full row width instead of appearing on each individual td.        */
	#scorecardTable tr.principle-group-bottom {
		border-bottom: var(--group-outer-border);
		margin-bottom: 0.875rem;
	}

	#scorecardTable tr.group-even.principle-group-bottom {
		border-bottom: var(--group-outer-border-even);
	}

	/* No border-bottom on individual tds – the tr handles it */
	#scorecardTable tr.principle-group-bottom > td {
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: none !important;
	}

	/* ── Totals footer ──────────────────────────────────────────────── */
	#scorecardTable .table > tfoot > tr {
		display: flex !important;
		align-items: center;
		padding: 0.5rem 0.75rem;
	}

	#scorecardTable .table > tfoot > tr > td:first-child {
		flex: 1 !important;
		text-align: right !important;
		font-size: 1rem;
		border: none !important;
		padding-right: 0.75rem !important;
	}

	#scorecardTable .table > tfoot > tr > td:last-child {
		flex: 0 0 auto !important;
		border: none !important;
		padding: 0 !important;
	}

	#totalPresentScore,
	#totalFutureScore {
		font-size: 1.5rem;
	}

	/* ── Touch targets ──────────────────────────────────────────────── */
	input[type="range"] { height: 40px; }

	input[type="range"].present-slider::-webkit-slider-thumb,
	input[type="range"].future-slider::-webkit-slider-thumb {
		width: 28px;
		height: 28px;
	}

	input[type="range"].present-slider::-moz-range-thumb,
	input[type="range"].future-slider::-moz-range-thumb {
		width: 28px;
		height: 28px;
	}

	/* ── Step 3: Level Up resources – 4-column table → 2-column ────── */
	.levelup-table .levelup-table-header [class*="col-3"] {
		width: 50%;
		max-width: 50%;
		flex: 0 0 50%;
	}

	.levelup-table .levelup-table-row [class*="col-3"] {
		width: 50%;
		max-width: 50%;
		flex: 0 0 50%;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	/* "Area" header label: span full width on 2-col layout */
	.levelup-table .levelup-area-col {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-bottom: 0.25rem;
	}

	.levelup-table .levelup-table-header [class*="col-3"]:first-child {
		display: none; /* hide the "Area to Improve" column header; shown inline via area col */
	}

	/* Results cards stack */
	.card.border-primary,
	.card.border-success {
		margin-bottom: 1rem;
	}
}

/* ===================================================================
   RESPONSIVE DESIGN - SMALL PHONES (≤ 575px)
   =================================================================== */
@media (max-width: 575.98px) {
	#scorecardTable .slider-label-cell {
		flex: 0 0 4.25rem;
	}

	.slider-type-label { font-size: 0.75rem; }

	[data-key-principle] { font-size: 15px; }

	/* Level Up resources: fully stacked on very small phones */
	.levelup-table .levelup-table-header {
		display: none !important;
	}

	.levelup-table .levelup-table-header [class*="col-3"],
	.levelup-table .levelup-table-row [class*="col-3"],
	.levelup-table .levelup-area-col {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 0.5rem;
	}

	input[type="range"]::-webkit-slider-thumb {
		width: 28px;
		height: 28px;
	}

	input[type="range"]::-moz-range-thumb {
		width: 28px;
		height: 28px;
	}
}

/* ===================================================================
   MOBILE DESCRIPTION SCROLL
   Built by JS inside each principle-name-cell; hidden on desktop,
   shown via the mobile media query below.
   =================================================================== */
.mobile-desc-scroll-wrapper {
	display: none;
}

.mobile-review-desc-wrapper {
	display: none;
}

/* ===================================================================
   MOBILE SCORE DESCRIPTION
   Appears below each slider on phones, hidden on desktop.
   Updated dynamically by JS to show the description for the current score.
   =================================================================== */
.mobile-score-desc {
	display: none;
	font-size: 0.72rem;
	line-height: 1.4;
	padding: 0.2rem 0 0.05rem 0.5rem;
	border-left: 3px solid transparent;
	margin-top: 0.2rem;
	border-radius: 0 2px 2px 0;
	transition: border-color 0.2s ease;
}

.mobile-score-desc .desc-range-label {
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mobile-score-desc .desc-text {
	color: var(--bs-body-color);
}

.mobile-score-desc.score-desc-poor   { border-left-color: rgb(var(--poor-rgb));   }
.mobile-score-desc.score-desc-fair   { border-left-color: rgb(var(--fair-rgb));   }
.mobile-score-desc.score-desc-good   { border-left-color: rgb(var(--good-rgb));   }
.mobile-score-desc.score-desc-better { border-left-color: rgb(var(--better-rgb)); }
.mobile-score-desc.score-desc-best   { border-left-color: rgb(var(--best-rgb));   }

.mobile-score-desc.score-desc-poor   .desc-range-label { color: rgb(var(--poor-rgb));   }
.mobile-score-desc.score-desc-fair   .desc-range-label { color: rgb(var(--fair-rgb));   }
.mobile-score-desc.score-desc-good   .desc-range-label { color: rgb(var(--good-rgb));   }
.mobile-score-desc.score-desc-better .desc-range-label { color: rgb(var(--better-rgb)); }
.mobile-score-desc.score-desc-best   .desc-range-label { color: rgb(var(--best-rgb));   }

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {
	.table thead {
		display: table-header-group;
	}

	/* Show only the description for the selected score */
	.principle-row {
		page-break-inside: avoid;
	}
}

/* ===================================================================
   ANIMATION FOR SCORE UPDATES
   =================================================================== */
@keyframes scoreUpdate {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}
}

.score-display strong.updating {
	animation: scoreUpdate 0.3s ease;
}

/* ===================================================================
   ACCESSIBILITY - FOCUS STATES
   =================================================================== */
input[type="range"]:focus {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

.future-slider:focus {
	outline-color: var(--future-color);
}

/* ===================================================================
   SLIDER LABEL CELLS (New 3-row layout)
   =================================================================== */

/* Col 1 on slider rows � contains the Present/Future label + inline score */
.slider-label-cell {
	min-width: 9em;
	vertical-align: middle;
	padding: 0.4rem 0.6rem !important;
}

.present-label-cell {
	border-bottom: none !important;
}

.future-label-cell {
	border-top: none !important;
}

/* Label text (Present / Future) */
.slider-type-label {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.present-label {
	color: var(--present-color, #4580AD);
}

.future-label {
	color: var(--future-color, #2d8659);
}

/* Inline score shown inside the label cell (small, muted) */
.slider-score-inline {
	font-size: 0.85rem;
	font-weight: 700;
	margin-left: 0.3rem;
}

/* ===================================================================
   SCORE CELLS (col 7, slider rows)
   =================================================================== */

.score-total-cell {
	vertical-align: middle;
	text-align: center;
	min-width: 3.5rem;
}

.present-score-cell {
	border-bottom: none !important;
}

.future-score-cell {
	border-top: none !important;
}

/* Description row � col 7 is empty, hide its borders for cleanliness.
   Background is intentionally NOT set here � let the group tint show through. */
.description-score-cell {
	border-left: none !important;
	border-top: none !important;
	border-bottom: none !important;
}

/* Principle name cell in the description row */
.principle-name-cell {
	vertical-align: middle;
	text-align: center;
}

/* ===================================================================
   REVIEW STEP - PER-ROW SCORE DISPLAY
   =================================================================== */

/* Ensure the split score columns fill the full cell height */
#reviewScorecardTable td.principle-column-score > .d-flex {
	min-height: 3rem;
	align-items: center;
}

/* Review table: sticky thead (mirrors scoring table) */
#reviewScorecardTable {
	overflow-x: auto;
	overflow-y: visible;
}

#reviewScorecardTable thead tr th {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* ===================================================================
   NEXT STEPS� TOP PRINT BUTTON
   =================================================================== */

/* Ensure the instructions box has enough top padding so the
   absolute-positioned button doesn't overlap the heading */
.next-steps-instructions {
	padding-top: 2.75rem !important;
}


/* ===================================================================
   PRINCIPLE GROUP ALTERNATING TINT
   .group-odd / .group-even set in Razor via i % 2 on all 3 rows.
   =================================================================== */

/* ODD groups � default white, no override needed except to reset
   any inherited tint when groups are adjacent */
/*tr.group-odd > td {
	background-color: #ffffff !important;
}*/

/* EVEN groups � blue tint on every cell in all 3 rows */
tr.group-even > td {
	background-color: var(--group-even-bg) !important;
}

/* Score cells on even group: nudge tints so they remain distinct
   on top of the group background */
tr.group-even td.bg-poor-10 {
	background-color: rgba(var(--poor-rgb), 0.15) !important;
}

tr.group-even td.bg-fair-10 {
	background-color: rgba(var(--fair-rgb), 0.15) !important;
}

tr.group-even td.bg-good-10 {
	background-color: rgba(var(--good-rgb), 0.15) !important;
}

tr.group-even td.bg-better-10 {
	background-color: rgba(var(--better-rgb), 0.15) !important;
}

tr.group-even td.bg-best-10 {
	background-color: rgba(var(--best-rgb), 0.15) !important;
}

/* Description score cell (col 7, empty) � inherit the group tint,
   just hide the borders */
/*tr.group-odd  > td.description-score-cell,
tr.group-even > td.description-score-cell {
	background-color: inherit !important;
	border-left: none !important;
	border-top: none !important;
	border-bottom: none !important;
}*/

/* Group separator: thick top border on every Present (first) row */
/*tr.principle-group-top > td {
	border-top: var(--group-separator);
	border-left: var(--group-separator);
	border-right: var(--group-separator);*/
/*border-top: var(--group-separator) !important;*/
/*}*/

table thead tr th:first-child {
	border-left: var(--group-outer-border);
}

table thead tr th:last-child {
	border-right: var(--group-outer-border);
}

/* Outer left/right on all 3 rows in every group */
tr.principle-group-top > td,
tr.principle-group-middle > td,
tr.principle-row > td,
tr.principle-group-bottom > td {
	border-left: var(--group-outer-border) !important;
	border-right: var(--group-outer-border) !important;
}

/* Inner top + bottom for description (middle) row — set first so principle-group-top can override */
tr.principle-row > td {
	border-top: var(--group-inner-border) !important;
	border-bottom: var(--group-inner-border) !important;
}

/* Outer top + inner bottom for description (first/top) row — comes after principle-row so wins on conflict */
tr.principle-group-top > td {
	border-top: var(--group-outer-border) !important;
	border-bottom: var(--group-inner-border) !important;
}

/* Inner top + inner bottom for present (middle) slider row */
tr.principle-group-middle > td {
	border-top: var(--group-inner-border) !important;
	border-bottom: var(--group-inner-border) !important;
}

/* Inner top + outer bottom for future (last) row */
tr.principle-group-bottom > td {
	border-top: var(--group-inner-border) !important;
	border-bottom: var(--group-outer-border) !important;
}

/* First group: thin top border to connect cleanly to thead */
tr.principle-group-top:first-child > td {
	border-top: 1px solid var(--bs-border-color) !important;
}

/* Even groups: prominent primary-colored outer borders */
tr.group-even.principle-group-top > td,
tr.group-even.principle-group-middle > td,
tr.group-even.principle-row > td,
tr.group-even.principle-group-bottom > td {
	border-left: var(--group-outer-border-even) !important;
	border-right: var(--group-outer-border-even) !important;
}

tr.group-even.principle-group-top > td {
	border-top: var(--group-outer-border-even) !important;
}

tr.group-even.principle-group-bottom > td {
	border-bottom: var(--group-outer-border-even) !important;
}

/* Re-assert: empty score cell in description row keeps no left/top/bottom borders */
td.description-score-cell {
	border-left: none !important;
	border-top: none !important;
	border-bottom: none !important;
}

/* ===================================================================
   VERTICAL COLUMN SEPARATORS (within groups)
   =================================================================== */

/* Key Principle col (1): thin right border — blends into the score area */
tr.principle-group-top > td:first-child,
tr.principle-group-middle > td:first-child,
tr.principle-row > td:first-child,
tr.principle-group-bottom > td:first-child {
	border-right: var(--group-inner-border) !important;
}

/* Score display col (last): thin left border — blends from the score area */
tr.principle-group-top > td:last-child,
tr.principle-group-middle > td:last-child,
tr.principle-row > td:last-child,
tr.principle-group-bottom > td:last-child {
	border-left: var(--group-inner-border) !important;
}

/* Slider cell (colspan=5): inner borders both sides, matches column boundaries */
tr.principle-group-middle > td.slider-cell,
tr.principle-group-bottom > td.slider-cell {
	border-left: var(--group-inner-border) !important;
	border-right: var(--group-inner-border) !important;
}

/* First score col: thin left border (adjacent to Key Principle) */
tr.principle-row > td:nth-child(2) {
	border-left: var(--group-inner-border) !important;
}

/* Last score col: thin right border (adjacent to Score Display) */
tr.principle-row > td:nth-child(6) {
	border-right: var(--group-inner-border) !important;
}

/* Between score columns (Poor/Fair/Good/Better/Best): medium separator */
tr.principle-row > td:nth-child(n+2):nth-child(-n+5) {
	border-right: var(--group-score-separator) !important;
}

tr.principle-row > td:nth-child(n+3):nth-child(-n+6) {
	border-left: var(--group-score-separator) !important;
}

/* ===================================================================
   STICKY THEAD
   =================================================================== */

/* The table-responsive div must NOT clip the sticky header.
   Page scrolls naturally so position:sticky on thead tr works
   as long as no ancestor has overflow:hidden/auto above it.
   We keep overflow-x on the wrapper for horizontal scroll only. */
#scorecardTable {
	overflow-x: auto;
	overflow-y: visible; /* ensure sticky works */
}

thead tr th {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* ===================================================================
   THUMB VALUE OVERLAY
   Custom thumb uses a CSS-painted label via a data attribute trick.
   We size the thumb up slightly (24px) to fit the number comfortably.
   =================================================================== */
input[type="range"].present-slider::-webkit-slider-thumb,
input[type="range"].future-slider::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
}

input[type="range"].present-slider::-moz-range-thumb,
input[type="range"].future-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
}

/* The overlay number is rendered via a <span class="slider-thumb-label">
   positioned absolute over the thumb. Calculated in JS. */
.slider-thumb-label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	color: white;
	pointer-events: none;
	z-index: 2;
	/* left is set by JS */
}

.present-slider ~ .slider-thumb-label {
	background: var(--present-color);
}

.future-slider ~ .slider-thumb-label {
	background: var(--future-color);
}

/* ===================================================================
   SLIDER TOOLTIP BUBBLE
   =================================================================== */
.slider-tooltip {
	position: absolute;
	top: -2rem;
	transform: translateX(-50%);
	background: rgba(0,0,0,0.75);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	white-space: nowrap;
	z-index: 20;
}

	.slider-tooltip::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border: 4px solid transparent;
		border-top-color: rgba(0,0,0,0.75);
	}

.slider-track:hover .slider-tooltip,
.slider-track:has(input:focus) .slider-tooltip,
.slider-track.dragging .slider-tooltip {
	opacity: 1;
}
/* ===================================================================
   SCORE COLUMN SPLIT (Option B - flex sub-columns)
   =================================================================== */
.score-sub-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0;
}

.score-sub-label {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.85;
	line-height: 1;
	margin-bottom: 0.15rem;
}

.score-sub-value {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
}

.score-sub-footer {
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	opacity: 0.75;
	padding: 0.2rem 0;
	border-top: 1px solid rgba(255,255,255,0.2);
	letter-spacing: 0.04em;
}

/* Present/future score values in the split body cells */
.score-split-cell .score-sub-col {
	justify-content: center;
	min-height: 2rem;
}
.score-fraction-divider {
	width: 70%;
	height: 1px;
	background-color: currentColor;
	opacity: 0.3;
	margin: 0.2rem auto;
}

.score-sub-denom {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.5;
	line-height: 1;
}