/* Carpokes Header Dashboard - base image version */

/* Kill old Header Banner background/color behavior */
.headerbar,
.dashboard-header,
.headerbar .dashboard-header,
.headerbar .header-dashboard,
.headerbar .cp-headerdash-base-wrap,
.cp-headerdash-base-wrap {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
}

/* Also defeat inline background styles from ACP/config if present */
.headerbar[style],
.dashboard-header[style],
.header-dashboard[style] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}

/* Keep the phpBB/headerbar area from creating padding or horizontal scroll */
.headerbar {
padding: 0 !important;
margin: 0 auto 10px auto !important;
overflow: hidden !important;

background: transparent !important;
background-color: transparent !important;
background-image: none !important;

border: 0 !important;
box-shadow: none !important;

}

/*
Main dashboard wrapper.

The black background fills any tiny area exposed by the rounded
bottom corners of the dashboard image.

The spacing below the banner lives on .headerbar so no old
header background can show through.

*/
.dashboard-header {
position: relative;
padding: 0 !important;
margin: 0 auto !important;
overflow: hidden !important;

background: #000 !important;
background-color: #000 !important;
background-image: none !important;

border: 0 !important;
border-radius: 12px !important;

}

.headerbar .header-dashboard {
display: block !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 100%;
overflow: hidden !important;
}

/* Hide the original phpBB header identity block */
.headerbar #site-description,
.headerbar .site-description,
.headerbar h1,
.headerbar p.skiplink {
display: none !important;
}

/* Keep our hidden accessibility block out of view */
.dashboard-header #hidden {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: -100;
}

/* Base banner image wrapper */
.cp-headerdash-base-wrap {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
line-height: 0;
overflow: hidden;
box-sizing: border-box;

background: #000 !important;
background-color: #000 !important;

border-radius: 12px;

}

/*
Layer model:

z-index 1  = photo windows behind transparent PNG
z-index 2  = base dashboard PNG
z-index 3  = odometer digits above PNG
z-index 4  = gauge needles above PNG (superseded by z-index 40, see below)
z-index 5  = full banner home link
z-index 20 = Store/Terms links
z-index 25 = photo links
z-index 30 = search and future carousel arrows
z-index 40 = gauge needles (force-restore layer)

*/

.cp-headerdash-base-image {
position: relative;
z-index: 2;
display: block;
width: 100%;
height: auto;
max-width: 100%;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
pointer-events: none;
}

/*
Full-size positioning layer.

Important: no z-index here.
This lets child elements sit either below or above the base PNG.

*/
.cp-headerdash-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}

/* ---------------------------------------------------------
PHOTO WINDOW UNDERLAYS
--------------------------------------------------------- */

.cp-overlay-photo-1,
.cp-overlay-photo-2 {
position: absolute;
z-index: 1;
box-sizing: border-box;
overflow: hidden;
border: 0;
background: rgba(190, 220, 235, 0.82);
color: transparent;
font-size: 0;
line-height: 0;
text-indent: -9999px;
pointer-events: none;
}

.cp-overlay-photo-1 img,
.cp-overlay-photo-2 img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Left transparent photo window */
.cp-overlay-photo-1 {
left: 23%;
top: 30.7%;
width: 26.7%;
height: 50.8%;
}

/* Right transparent photo window */
.cp-overlay-photo-2 {
left: 50.7%;
top: 30.7%;
width: 26.7%;
height: 50.8%;
}

/* ---------------------------------------------------------
ODOMETER TEST OVERLAYS - PER-DIGIT DRUM VERSION
--------------------------------------------------------- */

.cp-overlay-members,
.cp-overlay-posts {
position: absolute;
z-index: 3;
box-sizing: border-box;
pointer-events: none;
white-space: nowrap;
text-indent: 0;
color: inherit;
font-size: inherit;
line-height: normal;
}

/* Members odometer position - locked */
.cp-overlay-members {
left: 6.9%;
top: 67%;
width: 9.15%;
height: 5.15%;
}

/* Posts odometer position - locked */
.cp-overlay-posts {
left: 84.3%;
top: 67%;
width: 9.15%;
height: 5.15%;
}

.cp-odo-drumset {
position: absolute;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
padding: 1px 3px;
overflow: hidden;

background:
	linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.045) 0%,
		rgba(0, 0, 0, 0.28) 22%,
		rgba(0, 0, 0, 0.78) 50%,
		rgba(0, 0, 0, 0.42) 100%
	);

border-radius: 1px;

box-shadow:
	inset 0 1px 2px rgba(255, 255, 255, 0.045),
	inset 0 -1px 3px rgba(0, 0, 0, 0.95);

}

/* Individual odometer number wheels */
.cp-odo-drumset span {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
height: 100%;
box-sizing: border-box;
overflow: hidden;

background:
	linear-gradient(
		to bottom,
		#171717 0%,
		#090909 23%,
		#000 48%,
		#050505 72%,
		#111 100%
	);

border-radius: 1px;

box-shadow:
	inset 1px 0 0 rgba(255, 255, 255, 0.03),
	inset -1px 0 0 rgba(0, 0, 0, 0.92),
	inset 0 1px 1px rgba(255, 255, 255, 0.03),
	inset 0 -1px 2px rgba(0, 0, 0, 0.95);

color: #e6e1d0;

font-family:
	"Arial Narrow",
	"Bahnschrift Condensed",
	"Helvetica Neue Condensed",
	"Roboto Condensed",
	Arial,
	sans-serif;

font-size: clamp(9px, 1.28vw, 18px);
font-weight: 500;
font-stretch: condensed;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1;

line-height: 1;
letter-spacing: 0;
text-align: center;
text-indent: 0;

transform: scaleY(1.08);
transform-origin: center center;

text-shadow:
	0 1px 1px #000,
	0 -1px 1px #000,
	1px 0 1px #000,
	-1px 0 1px #000;

}

/* Overall odometer-window shading */
.cp-odo-drumset::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.48) 0%,
			rgba(0, 0, 0, 0.14) 24%,
			rgba(0, 0, 0, 0) 42%,
			rgba(0, 0, 0, 0) 60%,
			rgba(0, 0, 0, 0.16) 78%,
			rgba(0, 0, 0, 0.52) 100%
		);
}

/* Subtle individual drum curvature */
.cp-odo-drumset span::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;

background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 0.02) 0%,
		rgba(255, 255, 255, 0) 32%,
		rgba(0, 0, 0, 0.22) 100%
	);

}

/* Stronger top/bottom shading on each odometer drum */
.cp-odo-drumset span::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.72) 0%,
			rgba(0, 0, 0, 0.42) 16%,
			rgba(0, 0, 0, 0.10) 34%,
			rgba(0, 0, 0, 0) 46%,
			rgba(0, 0, 0, 0) 56%,
			rgba(0, 0, 0, 0.12) 70%,
			rgba(0, 0, 0, 0.44) 86%,
			rgba(0, 0, 0, 0.74) 100%
		);
}

/* ---------------------------------------------------------
GAUGE NEEDLES (single source of truth)
--------------------------------------------------------- */

.cp-needle-test {
	position: absolute !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 40 !important;

	width: 7.9% !important;
	height: 1.9% !important;

	transform-origin: 0% 50% !important;
	pointer-events: none !important;
}

/* Orange needle blade */
.cp-needle-test::before {
	content: "" !important;
	position: absolute !important;
	display: block !important;

	left: 0 !important;
	top: 50% !important;
	width: 100% !important;
	height: 100% !important;

	transform: translateY(-50%) !important;

	clip-path: polygon(
		0% 12%,
		88% 12%,
		100% 50%,
		88% 88%,
		0% 88%
	) !important;

	background:
		linear-gradient(
			to bottom,
			#ffd08a 0%,
			#ffa53d 30%,
			#ea6f09 68%,
			#7a2200 100%
		) !important;

	box-shadow:
		0 0 3px rgba(255, 130, 25, 0.80),
		0 0 7px rgba(255, 90, 0, 0.20),
		inset 0 1px 0 rgba(255, 240, 200, 0.55),
		inset 0 -1px 0 rgba(80, 20, 0, 0.55) !important;
}

/* Center hub */
.cp-needle-test::after {
	content: "" !important;
	position: absolute !important;
	display: block !important;

	left: 0 !important;
	top: 50% !important;
	width: 17.2% !important;
	aspect-ratio: 1 / 1;

	transform: translate(-50%, -50%) !important;
	border-radius: 50% !important;

	background:
		radial-gradient(
			circle,
			#666 0%,
			#343434 34%,
			#171717 68%,
			#000 100%
		) !important;

	box-shadow:
		0 0 4px rgba(0, 0, 0, 0.95),
		inset 0 1px 1px rgba(255, 255, 255, 0.16),
		inset 0 -1px 1px rgba(0, 0, 0, 0.88) !important;
}

/* Members needle */
.cp-needle-members-test {
	left: 11.6% !important;
	top: 54.9% !important;

}

/* Posts needle */
.cp-needle-posts-test {
	left: 89% !important;
	top: 54.9% !important;
/*	transform: rotate(-199deg) !important; */
}

/* ---------------------------------------------------------
LEGACY / CALIBRATION BOX SUPPORT
--------------------------------------------------------- */

.cp-overlay-test {
position: absolute;
box-sizing: border-box;
pointer-events: none;
}

/* ---------------------------------------------------------
TRANSPARENT BANNER LINKS
--------------------------------------------------------- */

.cp-headerdash-link {
	position: absolute;
	display: block;
	pointer-events: auto;
	background: transparent;
	overflow: hidden;
	cursor: pointer;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-shadow: none !important;
	text-indent: 0 !important;
	white-space: nowrap;
}

/* Full banner click target back to Carpokes home */
.cp-headerdash-link-main {
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
background: transparent;
cursor: pointer;
}

/* Store button click zone - locked */
.cp-headerdash-link-store {
left: 21.25%;
top: 91.5%;
width: 6%;
height: 6.5%;
z-index: 20;
background: transparent;
cursor: pointer;
border-radius: 4px;
}

/* Terms button click zone - locked */
.cp-headerdash-link-terms {
left: 93.7%;
top: 91.7%;
width: 5.85%;
height: 6.8%;
z-index: 20;
background: transparent;
cursor: pointer;
border-radius: 4px;
}

/* Photo 1 click zone - locked */
.cp-headerdash-link-photo-1 {
left: 23.4%;
top: 32.1%;
width: 25.85%;
height: 50.7%;
z-index: 25;
background: transparent;
outline: 0;
border-radius: 15px;
cursor: pointer;
}

/* Photo 2 click zone - locked */
.cp-headerdash-link-photo-2 {
left: 51.25%;
top: 32.1%;
width: 25.85%;
height: 50.7%;
z-index: 25;
background: transparent;
outline: 0;
border-radius: 15px;
cursor: pointer;
}

/* Hover / keyboard focus feedback for Store and Terms */
.cp-headerdash-link-store:hover,
.cp-headerdash-link-store:focus,
.cp-headerdash-link-store:focus-visible,
.cp-headerdash-link-terms:hover,
.cp-headerdash-link-terms:focus,
.cp-headerdash-link-terms:focus-visible {
background: rgba(255, 255, 255, 0.18);
box-shadow:
0 0 8px rgba(255, 255, 255, 0.45),
inset 0 0 8px rgba(255, 255, 255, 0.25);
outline: 1px solid rgba(255, 255, 255, 0.4);
}

/* Hover / keyboard focus feedback for photo window 1 */
.cp-headerdash-link-photo-1:hover,
.cp-headerdash-link-photo-1:focus,
.cp-headerdash-link-photo-1:focus-visible {
background: rgba(255, 255, 255, 0.08);
box-shadow:
0 0 10px rgba(255, 255, 255, 0.7),
0 0 18px rgba(120, 180, 255, 0.45),
inset 0 0 10px rgba(255, 255, 255, 0.22);
outline: 1px solid rgba(255, 255, 255, 0.55);
}

/* Hover / keyboard focus feedback for photo window 2 */
.cp-headerdash-link-photo-2:hover,
.cp-headerdash-link-photo-2:focus,
.cp-headerdash-link-photo-2:focus-visible {
background: rgba(255, 255, 255, 0.08);
box-shadow:
0 0 10px rgba(255, 255, 255, 0.7),
0 0 18px rgba(120, 180, 255, 0.45),
inset 0 0 10px rgba(255, 255, 255, 0.22);
outline: 1px solid rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------
NATIVE PHPBB SEARCH INSIDE DASHBOARD

Positioned absolutely so it does not increase banner height.
The search sits above the full-banner home link.
--------------------------------------------------------- */

.cp-headerdash-search {
position: absolute;
left: 31%;
top: 91.6%;
width: 30%;
height: 7.0%;
z-index: 30;

display: flex;
align-items: center;

margin: 0 !important;
padding: 0 !important;

line-height: normal;
pointer-events: auto;
box-sizing: border-box;

}

/* Neutralize normal phpBB search positioning */
.cp-headerdash-search .search-box,
.cp-headerdash-search #search-box {
position: static !important;
float: none !important;
display: block !important;

width: 100% !important;
height: 100% !important;

margin: 0 !important;
padding: 0 !important;

box-shadow: none !important;
box-sizing: border-box;

}

/* Keep the search form and fieldset on one compact line */
.cp-headerdash-search form,
.cp-headerdash-search fieldset {
display: flex !important;
align-items: stretch !important;

width: 100% !important;
height: 100% !important;

margin: 0 !important;
padding: 0 !important;
border: 0 !important;

box-sizing: border-box;

}

/* Search text field */
.cp-headerdash-search input[type="search"],
.cp-headerdash-search input.inputbox {
order: 1;
flex: 1 1 auto;

min-width: 0;
width: auto !important;
height: 100% !important;

margin: 0 !important;
padding: 0 8px !important;

box-sizing: border-box;

border: 1px solid rgba(255, 255, 255, 0.42) !important;
border-radius: 4px 0 0 4px !important;

background: rgba(255, 255, 255, 0.95) !important;
color: #222 !important;

font-size: clamp(9px, 0.9vw, 14px) !important;
line-height: 1 !important;

}

/* Search and advanced-search buttons */
.cp-headerdash-search .button {
	flex: 0 0 auto;
	height: 100% !important;
	min-width: 28px;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;
	padding: 0 7px !important;
	line-height: 1 !important;

	box-sizing: border-box;

	border: 1px solid rgba(255, 255, 255, 0.42) !important;
	border-left: 0 !important;
	border-radius: 0 !important;

	background: #ad0f08 !important;
	color: #fff !important;

	box-shadow: none !important;
	text-shadow: none !important;
}

.cp-headerdash-search .button i,
.cp-headerdash-search .button .icon {
	line-height: 1 !important;
	margin: 0 !important;
	position: relative;
	top: -1px;
}

/*
phpBB places the buttons before the text field in navbarsearch.html.
Use flex order so the text field appears first, followed by buttons.
*/
.cp-headerdash-search .button-search {
	order: 2;
}

.cp-headerdash-search .button-search-end {
	order: 3;
	border-radius: 0 4px 4px 0 !important;
}

/* Keep search icons white */
.cp-headerdash-search .button,
.cp-headerdash-search .button i,
.cp-headerdash-search .button .icon,
.cp-headerdash-search .button i:before,
.cp-headerdash-search .button .icon:before {
	color: #fff !important;
	opacity: 1 !important;
}

/* Backup for SVG-style icons, if any */
.cp-headerdash-search .button svg,
.cp-headerdash-search .button svg * {
	fill: #fff !important;
}

/* Search button hover/focus feedback */
.cp-headerdash-search .button:hover,
.cp-headerdash-search .button:focus {
	background: #c2331d !important;
	color: #fff !important;
}

/* Search field focus */
.cp-headerdash-search input[type="search"]:focus,
.cp-headerdash-search input.inputbox:focus {
	outline: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 7px rgba(255, 255, 255, 0.35);
}

/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */

@media only screen and (max-width: 900px) {
.headerbar .header-dashboard {
display: block !important;
}

.headerbar {
	margin-bottom: 10px !important;
}

.dashboard-header {
	margin-bottom: 0 !important;
}

.cp-headerdash-base-wrap {
	display: block !important;
	width: 100% !important;
	max-width: 100%;
	margin: 8px 0 0 0;
	overflow: hidden;
}

.cp-headerdash-search {
	display: flex !important;
	left: 31% !important;
	top: 91.6% !important;
	width: 30% !important;
	height: 7.0% !important;
}

}

@media only screen and (max-width: 700px),
only screen and (max-device-width: 700px) {
.headerbar,
.dashboard-header,
.headerbar .header-dashboard {
	display: block !important;
	width: 100vw !important;
	max-width: none !important;

	position: relative;
	left: 50%;
	transform: translateX(-50%);

	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.headerbar {
	margin-bottom: 8px !important;
}

.dashboard-header {
	margin-bottom: 0 !important;
	border-radius: 6px !important;
}

.cp-headerdash-base-wrap {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 6px 0 0 0 !important;
	overflow: hidden;
	border-radius: 6px;
}

.cp-headerdash-base-image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	border-radius: 6px;
}

.cp-headerdash-overlay {
	display: block !important;
}

.cp-overlay-photo-1,
.cp-overlay-photo-2 {
	display: block !important;
}

.cp-odo-drumset span {
	font-size: clamp(6px, 1.18vw, 10px);
	transform: scaleY(1.04);
}

.cp-odo-drumset {
	gap: 1px;
	padding: 1px 2px;
}

/*
	The full dashboard search is too cramped on phones.
	Mobile already has phpBB's search icon in the nav/breadcrumb area.
*/
.cp-headerdash-search {
	display: none !important;
}

}