/* 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;
}

/* Old IE fallback retained from original extension */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.headerbar .header-dashboard {
width: 100% !important;
}
}

/* Old search positions retained from the original extension */
.headerdashboard-search-1 {
top: 30px;
left: 30px;
position: absolute;
z-index: 5;
}

.headerdashboard-search-2 {
top: 30px;
right: 30px;
position: absolute;
z-index: 5;
}

.headerdashboard-search-3 {
bottom: 30px;
left: 30px;
position: absolute;
z-index: 5;
}

.headerdashboard-search-4 {
bottom: 30px;
right: 30px;
position: absolute;
z-index: 5;
}

.headerdashboard-search-7 {
bottom: -5px;
left: 39%;
position: absolute;
z-index: 5;
}

/* Hide old mobile banner area from original extension */
.headerbar .mobile-header-dashboard {
display: none !important;
}

/* Search styling retained from original extension */
.navbar #search-box {
box-shadow: none;
margin: auto;
padding: 5px;
}

.rtl .navbar #search-box {
float: left;
}

.navbar .button-search-end {
border-radius: 0 4px 4px 0;
}

.rtl .navbar .button-search-end {
border-radius: 4px 0 0 4px;
}

/* 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
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

*/

.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-photo-slot,
.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-photo-slot img,
.cp-overlay-photo-1 img,
.cp-overlay-photo-2 img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

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

/* Right transparent photo window */
.cp-photo-slot-right,
.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,
.cp-odo-members,
.cp-odo-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,
.cp-odo-members {
left: 6.9%;
top: 67%;
width: 9.15%;
height: 5.15%;
}

/* Posts odometer position - locked */
.cp-overlay-posts,
.cp-odo-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%
		);
}

/* Fallback if old .cp-odo text nodes are still present */
.cp-odo {
position: absolute;
z-index: 3;
box-sizing: border-box;
pointer-events: none;

color: #dedbcc;
font-family:
	"Arial Narrow",
	"Bahnschrift Condensed",
	"Helvetica Neue Condensed",
	Arial,
	sans-serif;
font-size: clamp(9px, 1.24vw, 17px);
font-weight: 500;
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
letter-spacing: 0.08em;
line-height: 1;
text-shadow: 0 1px 1px #000;

}

/* ---------------------------------------------------------
TEMP NEEDLE CALIBRATION OVERLAYS
--------------------------------------------------------- */

.cp-needle-test {
position: absolute;
z-index: 4;
pointer-events: none;

/*
	The element's left edge is the true pivot center.
	The entire needle rotates around that point.
*/
width: 7.9%;
height: 1.9%;
transform-origin: 0% 50%;

}

/* Needle body: thick blade with short pointed end */
.cp-needle-test::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 100%;
transform: translateY(-50%);

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

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

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);

}

/* Center hub / pivot cap */
.cp-needle-test::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 17.2%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
border-radius: 50%;

background:
	radial-gradient(
		circle,
		#666666 0%,
		#343434 34%,
		#171717 68%,
		#000000 100%
	);

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);

}

/* Members needle - tuned pivot position */
.cp-needle-members-test {
left: 11.6%;
top: 54.9%;
transform: rotate(-199deg);
}

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

/* ---------------------------------------------------------
LEGACY NEEDLE PLACEHOLDERS FOR LATER
--------------------------------------------------------- */

.cp-needle {
position: absolute;
z-index: 4;
pointer-events: none;
transform-origin: center bottom;
}

/* Members needle placeholder */
.cp-needle-members {
left: 9.5%;
top: 34%;
width: 4%;
height: 28%;
}

/* Posts needle placeholder */
.cp-needle-posts {
left: 87%;
top: 34%;
width: 4%;
height: 28%;
}

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

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

/* Optional calibration helper */
.cp-calibrate {
outline: 2px solid rgba(255, 0, 0, 0.95);
background-color: rgba(255, 255, 0, 0.25);
}

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

.cp-headerdash-link {
position: absolute;
display: block;
pointer-events: auto;
background: transparent;
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
}

/* 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.8%;
width: 30%;
height: 6.80%;
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;

margin: 0 !important;
padding: 0 7px !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;

}

/*
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 .icon,
.cp-headerdash-search .button i {
color: #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: calc(100% - 12px);
	max-width: 100%;
	margin: 8px auto 0 auto;
	overflow: hidden;
}

.cp-headerdash-search {
	left: 31%;
	width: 23%;
}

}

@media only screen and (max-width: 700px),
only screen and (max-device-width: 700px) {
.headerbar .header-dashboard {
display: block !important;
border-radius: 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: calc(100% - 8px) !important;
	max-width: 100% !important;
	margin: 6px auto 0 auto;
	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-photo-slot,
.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 template gives the dashboard search the responsive-hide class,
	so phpBB should hide it at mobile widths. This is a backup.
*/
.cp-headerdash-search {
	display: none !important;
}

}
/* ---------------------------------------------------------
   FORCE-RESTORE GAUGE NEEDLES
--------------------------------------------------------- */

.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;
	transform: rotate(-199deg) !important;
}

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