html, body {
		width: 100%;
		margin: 0;
		padding: 10px;
		box-sizing: border-box;
		font-family: 'Nunito', sans-serif;
	}

	#employeesGrid {
		width: 100% !important;
		min-width: 100%;
	}

	.dx-datagrid {
		width: 100% !important;
	}

	.dx-datagrid-content {
		width: 100% !important;
	}

	.employee-photo {
		border-radius: 50%;
		width: 40px;
		height: 40px;
		object-fit: cover;
		box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	}

	.employee-name {
		font-weight: 600;
		color: #2c3e50;
	}

	.applications-count {
		background-color: #3498db;
		color: white;
		padding: 4px 8px;
		border-radius: 12px;
		font-size: 12px;
		font-weight: bold;
	}

	h3 {
		margin: 0 0 15px 0;
		color: #34495e;
	}

	/* Enhanced Popup Scrollability Styles */
	.dx-overlay-wrapper {
		z-index: 9999 !important; /* Ensure modal stays on top */
	}

	.dx-popup-wrapper {
		max-height: 90vh !important;
	}

	.dx-popup-content {
		overflow: hidden !important;
		max-height: 85vh !important;
		padding: 0 !important;
		position: relative !important;
	}

	.dx-closebutton {
		background: rgba(255, 255, 255, 0.9) !important;
		border-radius: 50% !important;
		width: 35px !important;
		height: 35px !important;
		top: 10px !important;
		right: 10px !important;
		z-index: 1001 !important;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
		transition: all 0.3s ease !important;
		position: fixed !important;
	}

		.dx-closebutton:hover {
			background: #fff !important;
			transform: scale(1.1) !important;
		}

		.dx-closebutton .dx-icon {
			color: #34495e !important;
			font-size: 16px !important;
			font-weight: bold !important;
		}

	/* Profile Popup Styles */
	.profile-popup {
		padding: 0;
		background: #fff;
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.profile-scroll-container {
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		scroll-behavior: smooth;
	}

	.profile-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 40px 30px;
		text-align: center;
		color: white;
		position: relative;
		min-height: 280px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 100;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}

	.profile-photo-large {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: 5px solid white;
		margin: 0 auto 20px;
		display: block;
		object-fit: cover;
		box-shadow: 0 8px 32px rgba(0,0,0,0.3);
		flex-shrink: 0;
	}

	.profile-name {
		font-size: 28px;
		font-weight: 700;
		margin: 0 0 5px 0;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.profile-title {
		font-size: 16px;
		opacity: 0.9;
		margin: 0;
	}

	.profile-header-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.profile-text-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.profile-content {
		padding: 30px;
		background: white;
		position: relative;
		z-index: 5;
		min-height: calc(100vh - 350px);
	}

	.profile-section {
		margin-bottom: 30px;
		opacity: 0;
		transform: translateY(20px);
		animation: slideInUp 0.6s ease forwards;
	}

		.profile-section:nth-child(1) {
			animation-delay: 0.1s;
		}

		.profile-section:nth-child(2) {
			animation-delay: 0.2s;
		}

		.profile-section:nth-child(3) {
			animation-delay: 0.3s;
		}

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

	.section-title {
		font-size: 18px;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		gap: 10px;
	}

		.section-title i {
			color: #667eea;
		}

	.profile-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.stat-card {
		background: #f8f9fb;
		padding: 20px;
		border-radius: 12px;
		text-align: center;
		border-left: 4px solid #667eea;
		transform: translateY(20px);
		opacity: 0;
		animation: slideInUp 0.6s ease forwards;
	}

		.stat-card:nth-child(1) {
			animation-delay: 0.1s;
		}

		.stat-card:nth-child(2) {
			animation-delay: 0.2s;
		}

		.stat-card:nth-child(3) {
			animation-delay: 0.3s;
		}

		.stat-card:nth-child(4) {
			animation-delay: 0.4s;
		}

	.stat-number {
		font-size: 24px;
		font-weight: 700;
		color: #2c3e50;
		margin: 0 0 5px 0;
	}

	.stat-label {
		font-size: 12px;
		color: #7f8c8d;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.contact-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.contact-item {
		display: flex;
		align-items: center;
		gap: 15px;
		padding: 12px 15px;
		background: #f8f9fb;
		border-radius: 8px;
		transition: all 0.3s ease;
		transform: translateX(-20px);
		opacity: 0;
		animation: slideInRight 0.6s ease forwards;
	}

		.contact-item:nth-child(1) {
			animation-delay: 0.2s;
		}

		.contact-item:nth-child(2) {
			animation-delay: 0.3s;
		}

		.contact-item:nth-child(3) {
			animation-delay: 0.4s;
		}

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

	.contact-item:hover {
		background: #e8f4fd;
		transform: translateY(-2px);
	}

	.contact-icon {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: white;
		flex-shrink: 0;
	}

	.email-icon {
		background: #e74c3c;
	}

	.phone-icon {
		background: #27ae60;
	}

	.experience-icon {
		background: #f39c12;
	}

	.contact-text {
		flex: 1;
	}

	.contact-label {
		font-size: 12px;
		color: #7f8c8d;
		margin: 0;
	}

	.contact-value {
		font-size: 14px;
		font-weight: 600;
		color: #2c3e50;
		margin: 0;
	}

	.description-text {
		line-height: 1.8;
		color: #555;
		font-size: 15px;
		background: #f8f9fb;
		padding: 20px;
		border-radius: 12px;
		border-left: 4px solid #667eea;
	}

	.popup-footer {
		padding: 20px 30px;
		background: #f8f9fb;
		border-top: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		bottom: 0;
		z-index: 10;
		transform: translateY(20px);
		opacity: 0;
		animation: slideInUp 0.6s ease forwards;
		animation-delay: 0.5s;
	}

	.action-buttons {
		display: flex;
		gap: 10px;
	}

	.action-btn {
		padding: 10px 20px;
		border: none;
		border-radius: 6px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-primary {
		background: #667eea;
		color: white;
	}

	.btn-secondary {
		background: #95a5a6;
		color: white;
	}

	.action-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	/* Scrollbar Styling */
	.profile-scroll-container::-webkit-scrollbar {
		width: 8px;
	}

	.profile-scroll-container::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 10px;
	}

	.profile-scroll-container::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 10px;
	}

		.profile-scroll-container::-webkit-scrollbar-thumb:hover {
			background: #555;
		}

	/* Scroll Indicator */
	.scroll-indicator {
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		color: rgba(255, 255, 255, 0.8);
		animation: bounce 2s infinite;
		z-index: 10;
		transition: opacity 0.3s ease;
	}

		.scroll-indicator.hidden {
			opacity: 0;
		}

	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateX(-50%) translateY(0);
		}

		40% {
			transform: translateX(-50%) translateY(-10px);
		}

		60% {
			transform: translateX(-50%) translateY(-5px);
		}
	}

	/* Responsive Design */
	@media (max-width: 768px) {
		.profile-stats {
			grid-template-columns: repeat(2, 1fr);
		}

		.profile-content {
			padding: 20px;
		}

		.profile-header {
			padding: 30px 20px;
			min-height: 240px;
		}

			.profile-header.collapsed {
				min-height: 60px;
				padding: 8px 20px;
			}

		.profile-photo-large {
			width: 100px;
			height: 100px;
		}

		.profile-header.collapsed .profile-photo-large {
			width: 40px;
			height: 40px;
		}

		.profile-name {
			font-size: 24px;
		}

		.profile-header.collapsed .profile-name {
			font-size: 16px;
		}

		.popup-footer {
			flex-direction: column;
			gap: 15px;
			text-align: center;
		}

		.action-buttons {
			width: 100%;
			justify-content: center;
		}
	}

	/* Loading State */
	.loading-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.loading-spinner {
		border: 4px solid #f3f3f3;
		border-top: 4px solid #667eea;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* Parallax Effect */
	.profile-header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
		pointer-events: none;
	}