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

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

.th-kpi-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:16px;
}

.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-card-compact{
	min-height:0;
	padding:16px 18px;
	align-items:center;
	gap:14px;
	border-radius:18px;
	box-shadow:0 12px 30px var(--th-shadow-card);
}

.th-kpi-card-compact::before{
	width:92px;
	height:92px;
	inset:auto -32px -42px auto;
	opacity:.28;
}

.th-kpi-card-compact::after{
	opacity:.32;
}

.th-kpi-card-compact:hover{
	transform:translateY(-2px);
	box-shadow:0 16px 38px var(--th-shadow-card);
}

.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-card-compact .th-kpi-icon{
	width:46px;
	height:46px;
	min-width:46px;
	border-radius:16px;
	font-size:1.18rem;
	box-shadow:
		0 10px 22px var(--th-kpi-shadow, var(--th-shadow-card)),
		inset 0 1px 0 rgba(255,255,255,.08);
}

.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-card-compact .th-kpi-title{
	margin-bottom:4px;
	font-size:.72rem;
	font-weight:850;
	letter-spacing:0;
	text-transform:none;
}

.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-card-compact .th-kpi-value{
	margin-bottom:0;
	font-size:1.18rem;
	font-weight:850;
	line-height:1.12;
	letter-spacing:0;
	word-break:break-word;
}

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

.th-kpi-card-compact .th-kpi-text{
	margin-top:3px;
	font-size:.78rem;
	font-weight:650;
	line-height:1.35;
}

@media(max-width:991.98px){
	.th-kpi-grid{
		grid-template-columns:1fr;
	}
}

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

/* =========================================================
	KPI COST CHARTS
========================================================= */

.th-total-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-width:128px;
	min-height:40px;
	padding:8px 14px;
	border:1px solid var(--th-badge-border);
	border-radius:14px;
	background:var(--th-icon-soft-bg);
	color:var(--th-badge-text);
	font-weight:950;
	line-height:1;
	transition:
		background .22s ease,
		color .22s ease,
		transform .22s ease,
		box-shadow .22s ease,
		border-color .22s ease;
}

.th-total-btn i{
	font-size:1rem;
	line-height:1;
}

.th-total-btn:hover,
.th-total-btn:focus-visible{
	border-color:transparent;
	background:var(--th-gradient-cta);
	color:#ffffff;
	transform:translateY(-2px);
	box-shadow:0 14px 32px var(--th-glow-indigo);
	outline:none;
}

.th-cost-summary{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
	margin-bottom:18px;
}

.th-subscriptions-total-panel{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:18px 22px;
	border-bottom:1px solid var(--th-border-base);
	background:
		linear-gradient(135deg, rgba(22, 163, 74, .08), transparent 58%),
		var(--th-card-bg-glass);
}

.th-subscriptions-total-panel span,
.th-subscriptions-total-panel small{
	display:block;
	color:var(--th-color-text-soft);
	font-weight:850;
}

.th-subscriptions-total-panel span{
	font-size:.78rem;
	text-transform:uppercase;
	letter-spacing:.02em;
}

.th-subscriptions-total-panel strong{
	display:block;
	margin-top:2px;
	color:var(--th-color-text-main);
	font-size:1.45rem;
	font-weight:950;
	line-height:1.1;
}

.th-subscriptions-total-panel small{
	margin-top:2px;
	font-size:.82rem;
}

.th-cost-summary-item,
.th-cost-chart-panel{
	border:1px solid var(--th-border-base);
	background:var(--th-card-bg-glass);
	box-shadow:0 18px 46px var(--th-shadow-card);
}

.th-cost-summary-item{
	padding:16px;
	border-radius:18px;
}

.th-cost-summary-item span,
.th-cost-chart-header span{
	display:block;
	color:var(--th-color-text-soft);
	font-size:.78rem;
	font-weight:850;
}

.th-cost-summary-item strong{
	display:block;
	margin-top:4px;
	color:var(--th-color-text-main);
	font-size:1.35rem;
	font-weight:950;
	line-height:1.1;
}

.th-cost-chart-panel{
	padding:18px;
	border-radius:20px;
	overflow:hidden;
}

.th-cost-chart-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin-bottom:12px;
}

.th-cost-chart-header h6{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0 0 3px;
	color:var(--th-color-text-main);
	font-size:.95rem;
	font-weight:950;
}

.th-cost-chart-header i{
	color:var(--th-badge-text);
}

.th-cost-chart{
	min-height:330px;
	overflow-x:auto;
}

.th-cost-chart svg{
	display:block;
	width:100%;
	min-width:680px;
	height:auto;
}

.th-cost-axis,
.th-cost-grid-line{
	stroke:var(--th-border-base);
}

.th-cost-line{
	fill:none;
	stroke:#16a34a;
	stroke-width:4;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.th-cost-area{
	fill:rgba(34,197,94,.14);
}

.th-cost-point{
	fill:#bef264;
	stroke:#15803d;
	stroke-width:3;
	transition:
		r .18s ease,
		fill .18s ease,
		stroke .18s ease,
		filter .18s ease;
}

.th-cost-point-group{
	cursor:pointer;
}

.th-cost-hit-area{
	fill:transparent;
	stroke:transparent;
	pointer-events:all;
}

.th-cost-hover-line{
	opacity:0;
	stroke:#16a34a;
	stroke-width:2;
	stroke-dasharray:5 7;
	transition:opacity .18s ease;
}

.th-cost-point-group:hover .th-cost-hover-line{
	opacity:.55;
}

.th-cost-point-group:hover .th-cost-point{
	r:9;
	fill:#ffffff;
	stroke:#16a34a;
	filter:drop-shadow(0 0 10px rgba(190, 242, 100, .72));
}

.th-cost-point-group:hover .th-cost-value-label{
	fill:#16a34a;
}

.th-cost-label,
.th-cost-y-label{
	fill:var(--th-color-text-soft);
	font-size:12px;
	font-weight:850;
}

.th-cost-value-label{
	fill:var(--th-color-text-main);
	font-size:12px;
	font-weight:950;
}

.th-cost-empty{
	min-height:220px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px dashed var(--th-border-soft);
	border-radius:18px;
	color:var(--th-color-text-soft);
	font-weight:850;
	text-align:center;
}

.th-cost-breakdown{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:12px;
	margin-top:18px;
}

.th-cost-breakdown-card{
	min-height:auto;
	padding:16px;
	gap:14px;
	border-radius:18px;
}

.th-cost-breakdown-card .th-kpi-icon{
	width:46px;
	height:46px;
	min-width:46px;
	border-radius:16px;
	font-size:1.18rem;
}

.th-cost-breakdown-card .th-kpi-title{
	margin-bottom:5px;
	font-size:.72rem;
	line-height:1.25;
}

.th-cost-breakdown-card .th-kpi-value{
	margin-bottom:6px;
	font-size:1.18rem;
	letter-spacing:0;
}

.th-cost-breakdown-card .th-kpi-text{
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	font-size:.82rem;
}

html[data-theme="dark"] .th-cost-line{
	stroke:#bef264;
}

html[data-theme="dark"] .th-cost-area{
	fill:rgba(190,242,100,.12);
}

html[data-theme="dark"] .th-cost-point{
	fill:#052e16;
	stroke:#bef264;
}

html[data-theme="dark"] .th-cost-hover-line{
	stroke:#bef264;
}

html[data-theme="dark"] .th-cost-point-group:hover .th-cost-point{
	fill:#052e16;
	stroke:#bef264;
	filter:drop-shadow(0 0 12px rgba(190, 242, 100, .58));
}

html[data-theme="dark"] .th-cost-point-group:hover .th-cost-value-label{
	fill:#bef264;
}

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

@media (max-width:575.98px){
	.th-cost-summary,
	.th-cost-breakdown{
		grid-template-columns:1fr;
	}

	.th-total-btn{
		min-width:112px;
	}

	.th-subscriptions-total-panel{
		align-items:flex-start;
		flex-direction:column;
		padding:16px;
	}

	.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;
	}
}