/* Dashboard container */
.dashboard {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dashboard-container {
	display: flex;
	gap: 30px;
	width: 100%;
	margin-bottom:24px;
}

/* Chart cards base styles */
.chart-card {
	background: white;
	border-radius: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	opacity: 0;
	transform: translateY(50px);
}

.card-border {
	position: absolute;
	inset: 0;
	border: 1px solid #eaeaea;
	border-radius: 16px;
	pointer-events: none;
}

/* Performance card */
.chart-performance {
	flex: 1;
	animation: slideInUp 0.8s ease-out forwards;
}

/* Network card */
.chart-network {
	flex: 1;
	min-height: 1px;
	min-width: 1px;
	animation: slideInUp 0.8s ease-out 0.2s forwards;
}

/* Industries card */
.chart-industries {
	flex: 1;
	min-height: 1px;
	min-width: 1px;
	animation: slideInUp 0.8s ease-out 0.4s forwards;
}

/* Card headers */
.card-header {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	padding:0;
	background:none;
	border:none;
}

.title-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	align-items: flex-start;
	min-height: 1px;
	min-width: 1px;
	position: relative;
	opacity: 0;
	transform: translateY(-20px);
	animation: fadeInUp 0.6s ease-out 0.5s forwards;
}

.card-title {
	font-weight: 900;
	font-size: 20px !important;
	line-height: 28px !important;
	color: #1e1e21;
	white-space: pre;
}

/* Card content */
.card-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
}

/* Performance card info items */
.info-item {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	opacity: 0;
	transform: translateY(20px);
}

.info-item:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.2s forwards; }
.info-item:nth-child(2) { animation: fadeInUp 0.6s ease-out 0.6s forwards; }
.info-item:nth-child(3) { animation: fadeInUp 0.6s ease-out 1.0s forwards; }

.icon-badge {
	position: relative;
	border-radius: 12px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(0);
}

.bg-blue { 
	background-color: #e0e4fb; 
	animation: bounceIn 0.4s ease-out 0.2s forwards;
}
.bg-pink { 
	background-color: rgba(253, 1, 198, 0.15); 
	animation: bounceIn 0.4s ease-out 0.6s forwards;
}
.bg-orange { 
	background-color: rgba(255, 139, 106, 0.25); 
	animation: bounceIn 0.4s ease-out 1.0s forwards;
}

.icon {
	position: absolute;
	width: 24px;
	height: 24px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
}
.icon svg{
	margin-top:-7px;
}
.video-clip { animation: iconPop 0.5s ease-out 0.3s forwards; }
.clock { 
	animation: iconRotateIn 0.5s ease-out 0.7s forwards; 
	transform: translate(-50%, -50%) scale(0) rotate(-180deg);
}
.calendar { animation: iconPop 0.5s ease-out 1.1s forwards; }

.icon svg {
	width: 100%;
	height: 100%;
}

.info-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
	flex: 1;
	opacity: 0;
	transform: translateX(-20px);
}

.info-item:nth-child(1) .info-text { animation: slideInLeft 0.6s ease-out 0.4s forwards; }
.info-item:nth-child(2) .info-text { animation: slideInLeft 0.6s ease-out 0.8s forwards; }
.info-item:nth-child(3) .info-text { animation: slideInLeft 0.6s ease-out 1.2s forwards; }

.info-description {
	font-weight: 700;
	font-size: 16px;
	line-height: 26px;
	color: #1e1e21;
	width: 100%;
}

/* Network card styles */
.network-content {
	gap: 20px;
	width: 100%;
}

.network-item {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
	opacity: 0;
	transform: translateY(20px);
}

.network-item:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.8s forwards; }
.network-item:nth-child(2) { animation: fadeInUp 0.6s ease-out 1.2s forwards; }
.network-item:nth-child(3) { animation: fadeInUp 0.6s ease-out 1.6s forwards; }

.progress-bar {
	border-radius: 12px;
	padding: 4px;
	padding-left: 0;
	padding-right: 4px;
	display: flex;
	gap: 10px;
	align-items: end;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
}

.editors-bar {
	background: linear-gradient(to left, #e0e4fb, #ffffff);
}
.directors-bar {
	background: linear-gradient(to left, rgba(253, 1, 198, 0.15), #ffffff);
}
.operators-bar {
	background: linear-gradient(to left, rgba(255, 139, 106, 0.15), #ffffff);
}

.progress-fill {
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: 12px;
}

.editors-bar .progress-fill {
	background: linear-gradient(to left, #c5d1f8, #e8ecfa);
	animation: fillBar 1.5s ease-out 0.8s forwards;
}

.directors-bar .progress-fill {
	background: linear-gradient(to left, rgba(253, 1, 198, 0.3), rgba(253, 1, 198, 0.1));
	animation: fillBar 1.5s ease-out 1.2s forwards;
}

.operators-bar .progress-fill {
	background: linear-gradient(to left, rgba(255, 139, 106, 0.3), rgba(255, 139, 106, 0.1));
	animation: fillBar 1.5s ease-out 1.6s forwards;
}

.network-icon-badge {
	border-radius: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	transform: scale(0);
}
.bg-pink { background-color: rgba(253, 1, 198, 0.15);; animation: bounceIn 0.5s ease-out 1.0s forwards; }
.bg-orange { background-color: rgba(255, 139, 106, 0.25); animation: bounceIn 0.5s ease-out 1.4s forwards; }
.bg-blue-dark { background-color: #2745e5; animation: bounceIn 0.5s ease-out 1.8s forwards; }

.network-icon {
	position: absolute;
	width: 24px;
	height: 24px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
}
.network-icon img{
	margin-top:-7px;
}
.column { animation: iconPopSpring 0.6s ease-out 1.2s forwards; }
.director { animation: iconPopSpring 0.6s ease-out 1.6s forwards; }
.video { animation: iconPopSpring 0.6s ease-out 2.0s forwards; }

.network-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
	flex: 1;
	opacity: 0;
	transform: translateX(-20px);
}

.network-item:nth-child(1) .network-info { animation: slideInLeft 0.6s ease-out 1.0s forwards; }
.network-item:nth-child(2) .network-info { animation: slideInLeft 0.6s ease-out 1.4s forwards; }
.network-item:nth-child(3) .network-info { animation: slideInLeft 0.6s ease-out 1.8s forwards; }

.network-stats {
	display: flex;
	flex-direction: column;
	font-weight: 700;
	justify-content: center;
	line-height: 0;
	text-align: center;
	width: 100%;
	color: #1e1e21;
}

.network-count {
	font-weight: 900;
	font-size: 20px;
	line-height: 1.25;
}

.network-label {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.25;
}

/* Industries card styles */
.industries-content {
	gap: 16px;
	align-items: center;
	width: 100%;
}

.pie-chart-container {
	width: 124px;
	height: 124px;
	position: relative;
	opacity: 0;
	transform: scale(0) rotate(-180deg);
	animation: pieChartRotateIn 1.2s ease-out 0.5s forwards;
}

.pie-chart {
	width: 100%;
	height: 100%;
	transform: rotate(20deg);
}

.pie-segment {
	opacity: 0;
}

.pie-other { animation: fadeIn 0.5s ease-out 0.5s forwards; }
.pie-technology { 
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: drawPath 1s ease-out 0.7s forwards, fadeIn 0.1s ease-out 0.7s forwards;
}
.pie-media { 
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: drawPath 1s ease-out 1.0s forwards, fadeIn 0.1s ease-out 1.0s forwards;
}
.pie-services { 
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: drawPath 1s ease-out 1.3s forwards, fadeIn 0.1s ease-out 1.3s forwards;
}
/* Base style for all segments */
.segment {
	fill: none;
	stroke-width: 20;
	stroke-dasharray: 314; /* 2 * π * 50 */
	stroke-dashoffset: 314;
	stroke-linecap: butt;
	transition: stroke-dashoffset 0.6s ease;
}

/* Colors */
.technology { stroke: #1936d0; }
.media { stroke: #fd01c6; }
.services { stroke: #ff8b6a; }

/* “Other” slice thinner and drawn FIRST */
.other {
	stroke: #E9E9E9;
	stroke-width: 10;
}
.industries-legend {
	width: 100%;
}

.legend-item {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-bottom: 8px;
	opacity: 0;
	transform: translateX(-20px);
}

.legend-item:nth-child(1) { animation: slideInLeft 0.5s ease-out 1.5s forwards; }
.legend-item:nth-child(2) { animation: slideInLeft 0.5s ease-out 1.7s forwards; }
.legend-item:nth-child(3) { animation: slideInLeft 0.5s ease-out 1.9s forwards; }
.legend-item:nth-child(4) { animation: slideInLeft 0.5s ease-out 2.1s forwards; }

.legend-icon {
	border-radius: 20px;
	width: 10px;
	height: 10px;
}

.bg-blue-primary { background-color: #1936d0; }
.bg-pink-primary { background-color: #fd01c6; }
.bg-orange-primary { background-color: #FF8B6A; }
.bg-purple { background-color: #8395f0; }
.bg-gray { background-color: #e9e9e9; }

.legend-label {
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: #1e1e21;
	white-space: pre;
	flex: 1;
}

.legend-percentage {
	font-weight: 700;
	font-size: 12px;
	line-height: 22px;
	color: #1e1e21;
	white-space: pre;
}

/* Animations */
@keyframes slideInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

@keyframes bounceIn {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes iconPop {
	0% {
		transform: translate(-50%, -50%) scale(0);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.2);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes iconRotateIn {
	0% {
		transform: translate(-50%, -50%) scale(0) rotate(-180deg);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
	}
}

@keyframes iconPopSpring {
	0% {
		transform: translate(-50%, -50%) scale(0);
	}
	60% {
		transform: translate(-50%, -50%) scale(1.3);
	}
	80% {
		transform: translate(-50%, -50%) scale(0.9);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes fillBar {
	to {
		width: 100%;
	}
}

@keyframes pieChartRotateIn {
	0% {
		opacity: 0;
		transform: scale(0) rotate(-180deg);
	}
	50% {
		opacity: 1;
		transform: scale(1.1) rotate(0deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

@keyframes drawPath {
	to {
		stroke-dashoffset: 0;
	}
}

/* Counter animation will be handled by JavaScript */
.counter {
	display: inline-block;
}

/* Responsive design */
@media (max-width: 1280px) {
	.chart-performance {
		width: 100%;
		max-width: 465px;
	}
}

@media (max-width: 991px) {
	.dashboard-container {
		flex-direction: column;
		gap: 20px;
		align-items: center;
	}

	.chart-card {
		width: 100% !important;
		max-width: 465px;
	}
/* 
	.progress-bar {
		width: 100% !important;
		max-width: 222px;
	} */
}
@media (min-width: 992px) {
	.industries-legend{
		display:flex;
		flex-wrap: wrap; 
	}
	.legend-item{
		flex:0 0 50%;
	}
	.legend-label{
		flex:0;
	}
}