/* SIDEBAR CSS */
.mypage-sidebar {
	width: 260px;
	background: #ced3902b;
	border-right: 1px solid #dee2e6;
	padding: 25px 20px;
	/* 	min-height: 100vh; */
}

.mypage-sidebar .menu-item {
	padding: 10px 14px;
	border-radius: 8px;
	transition: 0.2s;
	font-weight: 500;
	color: #444;
	display: block;
}

.mypage-sidebar .menu-item:hover, .mypage-sidebar .menu-item.active {
	background: #e7f1ff;
	color: #0d6efd;
}
/* MOBILE SIDEBAR */
@media ( max-width : 991px) {
	#sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: -280px;
		width: 260px;
		background: #fff;
		z-index: 9999;
		transition: 0.3s ease;
	}
	#sidebar.active {
		left: 0;
	}
}

:root {
	--md-primary: #6200ea;
	--md-primary-dark: #3700b3;
	--md-secondary: #03dac6;
	--md-bg: #f5f5f7;
}

/* .md-container { */
/* 	background: var(--md-bg); */
/* 	padding: 30px; */
/* } */

/* CARD MATERIAL */
.md-card {
	border: none;
	border-radius: 5px;
	padding: 28px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	margin-bottom: 26px;
}

.md-section-title {
	font-weight: 700;
	margin-bottom: 18px;
	font-size: 1.35rem;
	color: var(--md-primary-dark);
}

/* AVATAR MATERIAL */
.md-avatar {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* ROLE MATERIAL CHIP */
.md-chip {
	display: inline-block;
	padding: 8px 16px;
	color: white;
	border-radius: 30px;
	font-weight: 500;
	margin-right: 8px;
	background: linear-gradient(90deg, var(--md-primary),
		var(--md-primary-dark));
	font-size: 0.85rem;
}

/* PERMISSION CARD */
.md-permission {
	background: #f3e8ff;
	padding: 12px 16px;
	border-radius: 12px;
	border-left: 5px solid var(--md-primary);
	margin-bottom: 10px;
}

.md-permission strong {
	color: var(--md-primary-dark);
}

/* TIMELINE */
.md-timeline {
	border-left: 3px solid #d7c9ff;
	padding-left: 20px;
}

.md-timeline-item {
	margin-bottom: 16px;
	position: relative;
}

.md-timeline-item::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--md-primary);
	position: absolute;
	left: -29px;
	top: 4px;
}

.md-label {
	font-size: 0.9rem;
	color: #555;
}

.page-wrapper {
	max-width: 1000px;
	/* 	margin: 50px auto; */
}

.header-title {
	font-weight: 700;
	font-size: 26px;
}

.header-subtitle {
	color: #6b7280;
	margin-top: -5px;
}

.section-title {
	font-size: 17px;
	margin-top: 25px;
	font-weight: 600;
	color: #4f46e5;
	padding-bottom: 6px;
	border-bottom: 2px solid #e4e7ff;
}

.btn-save {
	background: linear-gradient(135deg, #6366f1, #4f46e5);
	border: none;
	padding: 12px 26px;
	font-size: 16px;
	border-radius: 12px;
	font-weight: 600;
	color: white;
	transition: all .2s;
	box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.btn-save:hover {
	opacity: .9;
	transform: translateY(-2px);
}

.avatar-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
}

.avatar-img {
	width: 90px;
	height: 90px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.avatar-btn {
	padding: 6px 12px;
	border-radius: 8px;
	background: #eef2ff;
	color: #4f46e5;
	border: none;
	font-weight: 500;
	transition: .2s;
}

.avatar-btn:hover {
	background: #e0e7ff;
}

.password-wrapper .form-control {
	border-radius: 10px 0 0 10px;
	padding: 8px 12px;
	height: 42px;
	border: 1px solid #ddd;
	transition: 0.2s;
}

.password-wrapper .form-control:focus {
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
	border-color: #4f46e5;
}

.toggle-btn {
	border-radius: 0 10px 10px 0 !important;
	border: 1px solid #ddd;
	padding: 8px 12px;
	height: 42px;
}

.toggle-btn i {
	font-size: 16px;
}

.shadow-lg {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07) !important;
}