/* =========================================================
	TALENTHUB KPI CARDS
========================================================= */

.th-kpi-row{
	margin-bottom:28px;
}

.th-kpi-card{
	position:relative;
	height:100%;
	min-height:148px;
	padding:22px;
	display:flex;
	align-items:flex-start;
	gap:18px;
	border-radius:24px;
	border:1px solid var(--th-border-base);
	background:var(--th-card-bg-glass);
	box-shadow:0 18px 48px var(--th-shadow-card);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	overflow:hidden;
	transition:.26s ease;
}

.th-kpi-primary{
	--th-kpi-glow:rgba(34, 211, 238, .24);
	--th-kpi-border:rgba(34, 211, 238, .35);
	--th-kpi-icon-bg:rgba(34, 211, 238, .12);
	--th-kpi-icon-color:#0891b2;
	--th-kpi-shadow:rgba(34, 211, 238, .18);
	--th-kpi-icon-hover-color:#0e7490;
	--th-kpi-icon-hover-bg:rgba(34, 211, 238, .18);
	--th-kpi-icon-hover-border:rgba(8, 145, 178, .42);
	--th-kpi-icon-hover-ring:rgba(34, 211, 238, .13);
}

.th-kpi-success{
	--th-kpi-glow:rgba(34, 197, 94, .28);
	--th-kpi-border:rgba(34, 197, 94, .36);
	--th-kpi-icon-bg:rgba(34, 197, 94, .14);
	--th-kpi-icon-color:#16a34a;
	--th-kpi-shadow:rgba(34, 197, 94, .18);
	--th-kpi-icon-hover-color:#15803d;
	--th-kpi-icon-hover-bg:rgba(34, 197, 94, .22);
	--th-kpi-icon-hover-border:rgba(22, 163, 74, .44);
	--th-kpi-icon-hover-ring:rgba(34, 197, 94, .14);
}

.th-kpi-warning{
	--th-kpi-glow:rgba(245, 158, 11, .28);
	--th-kpi-border:rgba(245, 158, 11, .36);
	--th-kpi-icon-bg:rgba(245, 158, 11, .14);
	--th-kpi-icon-color:#d97706;
	--th-kpi-shadow:rgba(245, 158, 11, .18);
	--th-kpi-icon-hover-color:#b45309;
	--th-kpi-icon-hover-bg:rgba(245, 158, 11, .22);
	--th-kpi-icon-hover-border:rgba(217, 119, 6, .44);
	--th-kpi-icon-hover-ring:rgba(245, 158, 11, .14);
}

.th-kpi-danger{
	--th-kpi-glow:rgba(239, 68, 68, .26);
	--th-kpi-border:rgba(239, 68, 68, .36);
	--th-kpi-icon-bg:rgba(239, 68, 68, .13);
	--th-kpi-icon-color:#dc2626;
	--th-kpi-shadow:rgba(239, 68, 68, .18);
	--th-kpi-icon-hover-color:#b91c1c;
	--th-kpi-icon-hover-bg:rgba(239, 68, 68, .20);
	--th-kpi-icon-hover-border:rgba(220, 38, 38, .44);
	--th-kpi-icon-hover-ring:rgba(239, 68, 68, .13);
}

.th-kpi-info{
	--th-kpi-glow:rgba(59, 130, 246, .25);
	--th-kpi-border:rgba(59, 130, 246, .36);
	--th-kpi-icon-bg:rgba(59, 130, 246, .13);
	--th-kpi-icon-color:#2563eb;
	--th-kpi-shadow:rgba(59, 130, 246, .18);
	--th-kpi-icon-hover-color:#1d4ed8;
	--th-kpi-icon-hover-bg:rgba(59, 130, 246, .20);
	--th-kpi-icon-hover-border:rgba(37, 99, 235, .44);
	--th-kpi-icon-hover-ring:rgba(59, 130, 246, .13);
}

.th-kpi-card::before{
	content:"";
	position:absolute;
	inset:auto -40px -58px auto;
	width:132px;
	height:132px;
	border-radius:999px;
	background:var(--th-kpi-glow, var(--th-glow-cyan));
	opacity:.45;
	filter:blur(4px);
	transition:.26s ease;
}

.th-kpi-card::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 48%);
	opacity:.55;
	pointer-events:none;
}

.th-kpi-card::before,
.th-kpi-card::after{
	pointer-events:none;
}

.th-kpi-card .th-kpi-flash{
	position:absolute;
	top:-120%;
	left:-45%;
	width:42%;
	height:320%;
	background:linear-gradient(
		90deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.04) 35%,
		rgba(255,255,255,.18) 50%,
		rgba(255,255,255,.04) 65%,
		rgba(255,255,255,0) 100%
	);
	transform:rotate(22deg);
	filter:blur(2px);
	opacity:.9;
	z-index:1;
	animation:thKpiFlashMove 7s linear infinite;
}

.th-kpi-card:hover{
	transform:translateY(-4px);
	border-color:var(--th-kpi-border, var(--th-border-strong));
	box-shadow:0 24px 64px var(--th-shadow-card);
}

.th-kpi-card:hover::before{
	transform:scale(1.14);
	opacity:.65;
}

.th-kpi-card:hover .th-kpi-icon{
	transform:rotate(-6deg) scale(1.02);
	color:var(--th-kpi-icon-hover-color);
	background:var(--th-kpi-icon-hover-bg);
	border-color:var(--th-kpi-icon-hover-border);
	box-shadow:
		0 18px 42px var(--th-kpi-shadow),
		0 0 0 4px var(--th-kpi-icon-hover-ring),
		inset 0 1px 0 rgba(255,255,255,.14);
}

.th-kpi-card:hover .th-kpi-icon::after{
	opacity:1;
	transform:rotate(180deg);
}

.th-kpi-icon{
	position:relative;
	z-index:2;
	width:58px;
	height:58px;
	min-width:58px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:20px;
	color:var(--th-kpi-icon-color, var(--th-badge-text));
	background:var(--th-kpi-icon-bg, var(--th-badge-bg));
	border:1px solid var(--th-kpi-border, var(--th-border-base));
	font-size:1.55rem;
	box-shadow:
		0 16px 34px var(--th-kpi-shadow, var(--th-shadow-card)),
		inset 0 1px 0 rgba(255,255,255,.08);
	overflow:hidden;
	transform-origin:center;
	transition:
		transform .38s cubic-bezier(0.19, 1, 0.22, 1),
		background .35s ease,
		color .35s ease,
		box-shadow .35s ease,
		border-color .35s ease;
}

.th-kpi-icon::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,.16),
			rgba(255,255,255,0) 48%
		);
	opacity:.75;
	pointer-events:none;
}

.th-kpi-icon::after{
	content:"";
	position:absolute;
	inset:-40%;
	background:
		conic-gradient(
			from 180deg,
			transparent,
			rgba(255,255,255,.14),
			transparent 38%
		);
	opacity:0;
	transform:rotate(0deg);
	transition:
		opacity .45s ease,
		transform .8s cubic-bezier(0.19, 1, 0.22, 1);
}

.th-kpi-content{
	position:relative;
	z-index:2;
	min-width:0;
	flex:1;
}

.th-kpi-title{
	display:block;
	margin-bottom:6px;
	color:var(--th-color-text-muted);
	font-size:.82rem;
	font-weight:900;
	letter-spacing:.02em;
	text-transform:uppercase;
}

.th-kpi-value{
	display:block;
	margin-bottom:4px;
	color:var(--th-color-text-main);
	font-size:2.05rem;
	font-weight:950;
	line-height:1;
	letter-spacing:-.04em;
}

.th-kpi-text{
	margin:0;
	color:var(--th-color-text-soft);
	font-size:.9rem;
	font-weight:700;
	line-height:1.45;
}

/* =========================================================
	TYPES
========================================================= */

.th-kpi-primary{
	--th-kpi-glow:rgba(34, 211, 238, .24);
	--th-kpi-border:rgba(34, 211, 238, .35);
	--th-kpi-icon-bg:rgba(34, 211, 238, .12);
	--th-kpi-icon-color:#0891b2;
	--th-kpi-shadow:rgba(34, 211, 238, .18);
}

.th-kpi-success{
	--th-kpi-glow:rgba(34, 197, 94, .28);
	--th-kpi-border:rgba(34, 197, 94, .36);
	--th-kpi-icon-bg:rgba(34, 197, 94, .14);
	--th-kpi-icon-color:#16a34a;
	--th-kpi-shadow:rgba(34, 197, 94, .18);
}

.th-kpi-warning{
	--th-kpi-glow:rgba(245, 158, 11, .28);
	--th-kpi-border:rgba(245, 158, 11, .36);
	--th-kpi-icon-bg:rgba(245, 158, 11, .14);
	--th-kpi-icon-color:#d97706;
	--th-kpi-shadow:rgba(245, 158, 11, .18);
}

.th-kpi-danger{
	--th-kpi-glow:rgba(239, 68, 68, .26);
	--th-kpi-border:rgba(239, 68, 68, .36);
	--th-kpi-icon-bg:rgba(239, 68, 68, .13);
	--th-kpi-icon-color:#dc2626;
	--th-kpi-shadow:rgba(239, 68, 68, .18);
}

.th-kpi-info{
	--th-kpi-glow:rgba(59, 130, 246, .25);
	--th-kpi-border:rgba(59, 130, 246, .36);
	--th-kpi-icon-bg:rgba(59, 130, 246, .13);
	--th-kpi-icon-color:#2563eb;
	--th-kpi-shadow:rgba(59, 130, 246, .18);
}

/* =========================================================
	DARK MODE
========================================================= */

html[data-theme="dark"] .th-kpi-card::after{
	background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%);
}

html[data-theme="dark"] .th-kpi-primary{
	--th-kpi-icon-hover-color:#22d3ee;
	--th-kpi-icon-hover-bg:rgba(8, 145, 178, .24);
	--th-kpi-icon-hover-border:rgba(103, 232, 249, .55);
	--th-kpi-icon-hover-ring:rgba(103, 232, 249, .12);
}

html[data-theme="dark"] .th-kpi-success{
	--th-kpi-icon-hover-color:#22c55e;
	--th-kpi-icon-hover-bg:rgba(21, 128, 61, .28);
	--th-kpi-icon-hover-border:rgba(134, 239, 172, .55);
	--th-kpi-icon-hover-ring:rgba(134, 239, 172, .12);
}

html[data-theme="dark"] .th-kpi-warning{
	--th-kpi-icon-hover-color:#f59e0b;
	--th-kpi-icon-hover-bg:rgba(180, 83, 9, .28);
	--th-kpi-icon-hover-border:rgba(250, 204, 21, .55);
	--th-kpi-icon-hover-ring:rgba(250, 204, 21, .12);
}

html[data-theme="dark"] .th-kpi-danger{
	--th-kpi-icon-hover-color:#ef4444;
	--th-kpi-icon-hover-bg:rgba(185, 28, 28, .24);
	--th-kpi-icon-hover-border:rgba(252, 165, 165, .55);
	--th-kpi-icon-hover-ring:rgba(252, 165, 165, .12);
}

html[data-theme="dark"] .th-kpi-info{
	--th-kpi-icon-hover-color:#3b82f6;
	--th-kpi-icon-hover-bg:rgba(29, 78, 216, .24);
	--th-kpi-icon-hover-border:rgba(147, 197, 253, .55);
	--th-kpi-icon-hover-ring:rgba(147, 197, 253, .12);
}

/* =========================================================
	RESPONSIVE
========================================================= */

@media (max-width:575.98px){
	.th-kpi-card{
		min-height:auto;
		padding:20px;
		border-radius:22px;
	}

	.th-kpi-icon{
		width:52px;
		height:52px;
		min-width:52px;
		border-radius:18px;
		font-size:1.35rem;
	}

	.th-kpi-value{
		font-size:1.8rem;
	}
}

/* =========================================================
	DARK MODE CONTRAST
========================================================= */

html[data-theme="dark"] .th-kpi-card{
	background:
		linear-gradient(135deg, rgba(20, 83, 45, .82), rgba(2, 44, 34, .92)),
		#022c22;
	border-color:rgba(134, 239, 172, .18);
	box-shadow:
		0 22px 58px rgba(0, 0, 0, .36),
		inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .th-kpi-card::before{
	opacity:.72;
	filter:blur(10px);
}

html[data-theme="dark"] .th-kpi-card::after{
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 46%),
		linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
	opacity:1;
}

html[data-theme="dark"] .th-kpi-card:hover{
	border-color:var(--th-kpi-border);
	box-shadow:
		0 28px 70px rgba(0, 0, 0, .48),
		0 0 0 1px var(--th-kpi-border),
		inset 0 1px 0 rgba(255, 255, 255, .10);
}

html[data-theme="dark"] .th-kpi-title{
	color:rgba(220, 252, 231, .86);
}

html[data-theme="dark"] .th-kpi-value{
	color:#ffffff;
	text-shadow:0 8px 26px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] .th-kpi-text{
	color:rgba(220, 252, 231, .76);
}

html[data-theme="dark"] .th-kpi-icon{
	background:rgba(0, 0, 0, .16);
	box-shadow:
		0 18px 40px var(--th-kpi-shadow),
		inset 0 1px 0 rgba(255, 255, 255, .10);
}

@keyframes thKpiFlashMove{
	0%{
		transform:translateX(-220%) rotate(22deg);
		opacity:0;
	}

	8%{
		opacity:.9;
	}

	18%{
		opacity:.55;
	}

	30%{
		transform:translateX(520%) rotate(22deg);
		opacity:0;
	}

	100%{
		transform:translateX(520%) rotate(22deg);
		opacity:0;
	}
}