/* 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 !important;
	overflow: hidden !important;
}

/* Main dashboard wrapper */
.dashboard-header {
	position: relative;
	padding: 0 !important;
	margin: 0 auto !important;
	overflow: hidden !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;
	}
}

/* Search box positions retained from 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: 0px 4px 4px 0px;
}

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

/* Base banner image wrapper */

.cp-headerdash-base-wrap {
	position: relative;
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: 10px auto 12px auto;
	line-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}

/*
	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 = future SVG/CSS needles ABOVE PNG
*/

.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.
	Photo windows use z-index: 1.
	Odometers use z-index: 3.
*/

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

/* ---------------------------------------------------------
   PHOTO WINDOW UNDERLAYS
   These sit BEHIND the transparent PNG openings.

   For calibration, the blue/yellow fill shows through the transparent
   openings. No red border, because the border was creating the red line
   at the bottom of the windows.
--------------------------------------------------------- */

.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 - fine tuned */
.cp-photo-slot-left,
.cp-overlay-photo-1 {
	left: 23.0%;
	top: 30.7%;
	width: 26.7%;
	height: 50.8%;
}

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

/* ---------------------------------------------------------
   ODOMETER TEST OVERLAYS
   These sit ABOVE the PNG.
   They display 123456 for alignment.
--------------------------------------------------------- */

.cp-odo,
.cp-overlay-members,
.cp-overlay-posts {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	pointer-events: none;
	white-space: nowrap;
}

/* Hide any old label text inside legacy overlay boxes */
.cp-overlay-members,
.cp-overlay-posts {
	font-size: 0;
	color: transparent;
	text-indent: -9999px;
}

/*
	Old Porsche/VDO-style odometer look.

	The key change from the prior file is no Courier/typewriter font.
	This uses a condensed sans-serif stack and slightly taller digit shape.
	The base PNG already contains the dark tumbler recess, so the CSS
	should mostly supply the white digits, not a heavy new black box.
*/

.cp-odo,
.cp-overlay-members::before,
.cp-overlay-posts::before {
	display: block;
	color: #f5f5f5;

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

	font-size: clamp(9px, 1.42vw, 19px);
	font-weight: 500;
	font-stretch: condensed;
	font-variant-numeric: tabular-nums;
	line-height: 0.95;
	letter-spacing: 0.18em;
	text-align: center;
	text-indent: 0;

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

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.10) 0%,
			rgba(255, 255, 255, 0.03) 24%,
			rgba(0, 0, 0, 0.15) 50%,
			rgba(255, 255, 255, 0.04) 55%,
			rgba(0, 0, 0, 0.20) 100%
		);

	border: 0;
	border-radius: 1px;

	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.08),
		inset 0 -1px 2px rgba(0, 0, 0, 0.85);

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

/* Inject test digits for alignment */
.cp-overlay-members::before,
.cp-overlay-posts::before {
	content: "123456";
	width: 100%;
	height: 100%;
	padding: 0;
}

/* Members odometer - moved slightly down */
.cp-odo-members,
.cp-overlay-members {
	left: 6.8%;
	top: 65.8%;
	width: 9.3%;
	height: 4.8%;
}

/* Posts odometer - moved slightly down */
.cp-odo-posts,
.cp-overlay-posts {
	left: 84.2%;
	top: 65.8%;
	width: 9.3%;
	height: 4.8%;
}

/* If template already has real cp-odo text, keep it visible */
.cp-odo {
	color: #f5f5f5;
	text-indent: 0;
	padding: 0;
}

/* ---------------------------------------------------------
   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.0%;
	width: 4.0%;
	height: 28.0%;
}

/* Posts needle placeholder */
.cp-needle-posts {
	left: 87.0%;
	top: 34.0%;
	width: 4.0%;
	height: 28.0%;
}

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

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

/*
	Optional calibration helper.
	Add this class only while aligning.
*/

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

/* Responsive */

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

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 12px);
		max-width: 100%;
		margin: 8px auto 10px auto;
		overflow: hidden;
	}
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.headerbar .header-dashboard {
		display: block !important;
		border-radius: 0 !important;
	}

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 8px) !important;
		max-width: 100% !important;
		margin: 6px auto 8px auto;
		overflow: hidden;
	}

	.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,
	.cp-overlay-members::before,
	.cp-overlay-posts::before {
		font-size: clamp(6px, 1.36vw, 12px);
		letter-spacing: 0.13em;
		transform: scaleY(1.12);
	}
}