/* ###########################################################################
   Users module
############################################################################ */

.users-container{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px;
	box-sizing: border-box;
}


/* ###########################################################################
   Header
############################################################################ */

.users-header{
	display: flex;
	align-items: center;
	margin-bottom: 28px;
}


.users-header-title{
	display: flex;
	align-items: center;
	width: 100%;
	gap: 18px;
}


.users-title-content{
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	text-align: center;
}


.users-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	border-radius: 18px;
	background: linear-gradient(135deg, #7c4dff, #5227c9);
	color: #ffffff;
	font-size: 24px;
	box-shadow: 0 8px 25px rgba(96, 54, 200, 0.25);
}


.users-header .page-title{
	margin: 0;
	color: #25213a;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.5px;
}


.users-header .page-description{
	margin: 6px 0 0 0;
	color: #777486;
	font-size: 15px;
	line-height: 1.5;
}


/* ###########################################################################
   Button
############################################################################ */

.users-header .btn-primary{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 190px;
	padding: 14px 20px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(135deg, #7c4dff, #5426ca);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 20px rgba(91, 46, 200, 0.25);
}


.users-header .btn-primary:hover{
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(91, 46, 200, 0.35);
}


.users-header .btn-primary:active{
	transform: translateY(0);
	box-shadow: 0 5px 15px rgba(91, 46, 200, 0.2);
}


/* ###########################################################################
   Filters
############################################################################ */

.users-filters{
	margin-bottom: 20px;
}


.users-search{
	position: relative;
	width: 100%;
}


.users-search i{
	position: absolute;
	top: 50%;
	left: 17px;
	transform: translateY(-50%);
	color: #9a97a8;
	font-size: 15px;
	pointer-events: none;
}


.users-search input{
	width: 100%;
	height: 50px;
	padding: 0 18px 0 46px;
	border: 1px solid #dedbe7;
	border-radius: 12px;
	background: #ffffff;
	color: #29263a;
	font-size: 14px;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.users-search input::placeholder{
	color: #aaa7b5;
}


.users-search input:focus{
	border-color: #7c4dff;
	box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.1);
}


/* ###########################################################################
   Table container
############################################################################ */

.users-table-container{
	width: 100%;
	overflow-x: auto;
	border: 1px solid #e2dfea;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 8px 30px rgba(35, 28, 60, 0.05);
}


/* ###########################################################################
   Table
############################################################################ */

.users-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 650px;
}


.users-table thead{
	background: #faf9fc;
}


.users-table th{
	padding: 17px 20px;
	border-bottom: 1px solid #e8e5ee;
	color: #8a8797;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-align: left;
	text-transform: uppercase;
}


.users-table th:nth-child(4),
.users-table th:nth-child(5){
	text-align: center;
}


.users-table td{
	padding: 18px 20px;
	border-bottom: 1px solid #efedf3;
	color: #393547;
	font-size: 14px;
	vertical-align: middle;
}


.users-table tbody tr{
	transition: background 0.2s ease;
}


.users-table tbody tr:hover{
	background: #faf9ff;
}


.users-table tbody tr:last-child td{
	border-bottom: none;
}



/* ###########################################################################
   User avatar
############################################################################ */

.user-photo-header{
	width: 68px;
	padding-right: 6px !important;
}

.user-photo-cell{
	width: 68px;
	padding-right: 6px !important;
	text-align: center;
}

.user-avatar{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	overflow: hidden;
	flex-shrink: 0;
	border: 1px solid #e3deeb;
	border-radius: 50%;
	background: #f3efff;
	color: #7650dc;
	font-size: 15px;
	box-sizing: border-box;
}

.user-avatar img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ###########################################################################
   User information
############################################################################ */

.user-name{
	color: #29263a !important;
	font-weight: 600;
}


.user-email{
	color: #777486 !important;
}


/* ###########################################################################
   Status
############################################################################ */

.user-status-column{
	text-align: center;
}


.user-status{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 82px;
	padding: 7px 12px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 600;
}


.user-status-active{
	background: #ecfdf5;
	color: #16935b;
	border: 1px solid #b9efd3;
}


.user-status-inactive{
	background: #fff1f2;
	color: #dc4c5b;
	border: 1px solid #ffd1d7;
}


.user-status i{
	font-size: 10px;
}


/* ###########################################################################
   Actions
############################################################################ */

.user-actions{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}


.user-action-button{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #e1dee8;
	border-radius: 10px;
	background: #ffffff;
	color: #777486;
	cursor: pointer;
	font-size: 13px;
	transition: all 0.2s ease;
}


.user-action-button:hover{
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(35, 28, 60, 0.1);
}


/* Edit */

.user-edit:hover{
	border-color: #7c4dff;
	background: #f5f1ff;
	color: #7040e8;
}


/* Activate / deactivate */

.user-status-action:hover{
	border-color: #f0a83a;
	background: #fff8e9;
	color: #db8c12;
}


/* Delete */

.user-delete:hover{
	border-color: #f05b6b;
	background: #fff1f2;
	color: #e14355;
}


/* ###########################################################################
   Footer
############################################################################ */

.users-footer{
	display: flex;
	align-items: center;
	min-height: 54px;
	padding: 0 20px;
	margin-top: 14px;
	border: 1px solid #e2dfea;
	border-radius: 12px;
	background: #ffffff;
	box-sizing: border-box;
}


#usersCount{
	color: #8a8797;
	font-size: 13px;
}


/* ###########################################################################
   Empty states
############################################################################ */

.users-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 50px 20px;
	color: #9692a3;
}


.users-empty i{
	font-size: 30px;
	color: #c5c1cf;
}


.users-empty span{
	font-size: 14px;
}


.users-search-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 35px;
	margin-top: 16px;
	border: 1px dashed #d9d5e3;
	border-radius: 14px;
	background: #faf9fc;
	color: #9793a3;
}


.users-search-empty i{
	font-size: 24px;
	color: #b0aabb;
}


.users-search-empty span{
	font-size: 14px;
}


/* ###########################################################################
   Utility
############################################################################ */

.displayNone{
	display: none !important;
}

/* ###########################################################################
   Toolbar
############################################################################ */

.users-toolbar{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 20px;
}


.users-toolbar .btn-primary{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-width: auto;
	padding: 13px 20px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(135deg, #7c4dff, #5426ca);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 20px rgba(91, 46, 200, 0.25);
}


.users-toolbar .btn-primary:hover{
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(91, 46, 200, 0.35);
}


.users-toolbar .btn-primary:active{
	transform: translateY(0);
	box-shadow: 0 5px 15px rgba(91, 46, 200, 0.2);
}

/* ###########################################################################
   Responsive
############################################################################ */

@media(max-width: 700px){

	.users-container{
		padding: 25px 16px;
	}


	.users-header{
		margin-bottom: 22px;
	}


	.users-header-title{
		align-items: flex-start;
	}


	.users-icon{
		width: 50px;
		height: 50px;
		font-size: 20px;
	}


	.users-header .page-title{
		font-size: 27px;
	}


	.users-toolbar{
		justify-content: flex-end;
	}


	.users-table th,
	.users-table td{
		padding: 15px;
	}

}
/* ###########################################################################
   User creation result
############################################################################ */

.user-create-result{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 700px;
	margin: 40px auto;
	padding: 45px 35px;
	box-sizing: border-box;
	text-align: center;
}


.user-create-result-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 24px;
	border-radius: 50%;
	font-size: 34px;
}


.user-create-result.success .user-create-result-icon{
	border: 1px solid rgba(54, 190, 122, 0.35);
	background: rgba(54, 190, 122, 0.08);
	color: #36be7a;
	box-shadow: 0 0 30px rgba(54, 190, 122, 0.08);
}


.user-create-result.warning .user-create-result-icon{
	border: 1px solid rgba(242, 169, 59, 0.35);
	background: rgba(242, 169, 59, 0.08);
	color: #f2a93b;
	box-shadow: 0 0 30px rgba(242, 169, 59, 0.08);
}


.user-create-result-status{
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}


.user-create-result.success .user-create-result-status{
	color: #57c88a;
}


.user-create-result.warning .user-create-result-status{
	color: #e8a238;
}


.user-create-result h1{
	margin: 0;
	color: #e7e3ee;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.3;
}


.user-create-result-description{
	max-width: 620px;
	margin: 18px 0 26px;
	color: #b8b1c2;
	font-size: 16px;
	line-height: 1.6;
}


.user-create-result-description strong{
	color: #e1dce8;
	font-weight: 650;
}


.user-activation-link-box{
	width: 100%;
	margin-top: 10px;
	padding: 18px;
	box-sizing: border-box;
	border: 1px solid #394252;
	border-radius: 14px;
	background: #20242b;
}


.user-activation-link-box-header{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: #c8c1d3;
	font-size: 14px;
	text-align: left;
}


.user-activation-link-box-header i{
	color: #8b64ff;
}


.user-activation-link-content{
	display: flex;
	align-items: center;
	gap: 10px;
}


.user-activation-link{
	flex: 1;
	overflow: hidden;
	padding: 12px 14px;
	border: 1px solid #343b48;
	border-radius: 10px;
	background: #181b20;
	color: #9f8bff;
	font-size: 12px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.user-copy-activation-link{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	flex-shrink: 0;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, #7c4dff, #5629c8);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.user-copy-activation-link:hover{
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(91, 46, 200, 0.28);
}


.user-create-result-actions{
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}


.user-result-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 48px;
	padding: 0 20px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}


.user-result-button.secondary{
	border: 1px solid #394252;
	background: transparent;
	color: #d1cadb;
}


.user-result-button.primary{
	border: none;
	background: linear-gradient(135deg, #7c4dff, #5629c8);
	color: #ffffff;
}


@media(max-width: 600px){

	.user-create-result{
		margin: 20px auto;
		padding: 30px 18px;
	}


	.user-create-result h1{
		font-size: 26px;
	}


	.user-activation-link-content{
		align-items: stretch;
		flex-direction: column;
	}


	.user-copy-activation-link{
		width: 100%;
	}


	.user-create-result-actions{
		flex-direction: column;
		width: 100%;
	}


	.user-result-button{
		width: 100%;
	}

}

/* ###########################################################################
   Pending user activation
############################################################################ */

.user-status-pending{
	background:#fff7e6;
	color:#c67a00;
	border:1px solid #f4d394;
}

.user-status-action:disabled{
	opacity:.5;
	cursor:not-allowed;
	transform:none !important;
	box-shadow:none !important;
}

.user-status-action:disabled:hover{
	border-color:#e1dee8;
	background:#ffffff;
	color:#777486;
}