html,
body {
	margin: 0;
	padding: 0;
	background-color: #e9edf3;
	overflow-x: hidden;
	font-family: Arial, sans-serif;
}

/* ================= NAVBAR ================= */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1000;
}
.bnb-logo {
	display: flex;
	align-items: center;
	margin-left: 10px;
	margin-right: 8px;
}

.app-home-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.app-home-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.42);
	transform: translateY(-1px);
}

.app-home-btn i {
	font-size: 14px;
	line-height: 1;
}

/* .bnb-logo img {
	height: 39px;
	width: 36vh;
	object-fit: contain;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
	margin-left: -11vh;
} */

.bnb-logo img {
	height: 39px;
	width: auto;
	margin-left: 0;
}

.navbar-custom {
	background: linear-gradient(135deg, #223e5f 0%, #2c4f73 45%, #7b8fa1 100%);

	/* background: linear-gradient(135deg, #5f8fcf 0%, #2f5f9e 45%, #1f3f66 100%); */
	/* background: linear-gradient(135deg, #4a78b2 0%, #243b55 50%, #141e30 100%); */
	/* background: linear-gradient(135deg, #6fa3db 0%, #3f6fa3 45%, #2b4a66 100%); */
	/* background: linear-gradient(135deg, #7a7e7e 0%, #292b2e 45%, #101f32 100%); */
	/* background: linear-gradient(135deg, #ef3b3b 0%, #c02d50 45%, #c92f2f 100%); */

	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.navbar-brand {
	color: #fff;
	font-weight: bold;
}

/* .app-launcher {
	color: white;
	font-size: 18px;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 8px;
	margin-left: 150vh;
} */

/* .app-launcher:hover {
	background: rgba(255, 255, 255, 0.15);
} */

.navbar-custom .navbar-brand {
	color: #ffffff !important;
	text-decoration: none;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-brand:active {
	color: #ffffff !important;
	text-decoration: none;
}

.profile-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #173554, #3a6891);
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}

.profile-circle:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.22);
	filter: brightness(1.04);
}
/* .profile-circle {
	background: linear-gradient(135deg, #223e5f, #2c4f73);
} */

.profile-card {
	position: fixed;
	top: 68px;
	right: 16px;
	width: 320px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
	border: 1px solid #dbe4f0;
	border-radius: 18px;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
	padding: 0;
	display: none;
	z-index: 3000;
	overflow: hidden;
}

.profile-card::before {
	content: "";
	position: absolute;
	top: 10px;
	right: 18px;
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-top: 1px solid #dbe4f0;
	border-left: 1px solid #dbe4f0;
	transform: rotate(45deg);
}

.profile-card p {
	margin: 0;
	font-size: 13px;
	color: #334155;
}

.profile-card .profile-name {
	padding: 18px 18px 10px;
	font-weight: 700;
	font-size: 16px;
	color: #173554;
	background: linear-gradient(180deg, rgba(37, 99, 235, 0.08), transparent);
}

.profile-card .profile-info {
	padding: 0 18px 10px;
	font-size: 13px;
	color: #475569;
	line-height: 1.45;
}

.profile-status {
	font-size: 12px;
	/* font-weight: bold; */
	color: green;
}

#profileRole {
	padding-bottom: 16px;
}

.profile-card hr {
	margin: 0;
	border: 0;
	border-top: 1px solid #e5edf6;
}

.profile-card .change-pass-circle,
.profile-card .logout-circle {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: none;
	width: 42px;
	height: 42px;
	margin: 16px 0 18px;
	border-radius: 50%;
	font-size: 16px;
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}

.profile-card .change-pass-circle {
	margin-left: 18px;
	background: linear-gradient(135deg, #1d6fe8, #3b82f6);
}

.profile-card .logout-circle {
	margin-left: 10px;
	background: linear-gradient(135deg, #ff5f57, #ff3b30);
}

.profile-card .change-pass-circle:hover,
.profile-card .logout-circle:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
	filter: saturate(1.05);
}

.logout-circle {
	width: 32px;
	height: 30px;
	border-radius: 50%;
	background: #ff4d4d; /* red */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition:
		background 0.3s ease,
		transform 0.2s ease;
}

.logout-circle:hover {
	background: #e63b3b;
	transform: translateX(-50%) scale(1.1);
}

.change-pass-circle {
	width: 32px;
	height: 30px;
	border-radius: 50%;
	background: #0d6efd;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	position: absolute;
	bottom: 8px;
	left: 28%;
	transform: translateX(-50%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.change-pass-circle:hover {
	background: #084298;
}
.change-pass-card {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px; /* increased size */
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
	padding: 28px 30px;
	z-index: 4000;
	display: none;
}

.profile-name {
	font-size: 18px;
	font-weight: 600;
	color: #223e5f;
}

.change-pass-card input {
	font-size: 14px;
	border-radius: 8px;
	height: 40px;
}

.pass-wrapper {
	position: relative;
	margin-bottom: 16px;
}

.pass-wrapper input {
	width: 100%;
	padding: 10px 40px 10px 12px;
	border: 1px solid #ced4da;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
}

.pass-wrapper input:focus {
	outline: none;
	border-color: #223e5f;
	box-shadow: 0 0 0 2px rgba(34, 62, 95, 0.15);
}

.pass-wrapper i {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #6c757d;
	font-size: 17px;
}

.btn-primary {
	background-color: #223e5f;
	border: none;
	border-radius: 8px;
	padding: 8px;
	font-size: 14px;
}

.btn-primary:hover {
	background-color: #1a314c;
}

.cp-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(5px);
	z-index: 3500;
	display: none;
}
#cpEmail {
	text-align: left !important;
}
.close-btn {
	position: absolute;
	top: 12px;
	right: 14px;
	background: transparent;
	border: none;
	font-size: 22px;
	font-weight: 600;
	color: #6c757d;
	cursor: pointer;
	line-height: 1;
}

.close-btn:hover {
	color: #223e5f;
}

/* ✅ SweetAlert Fix + Small & Cute */
.small-swal {
	width: 320px !important;
	padding: 18px !important;
	border-radius: 12px !important;
}

.small-swal .swal2-title {
	font-size: 18px !important;
	margin-bottom: 8px !important;
}

.small-swal .swal2-html-container {
	font-size: 14px !important;
	color: #555;
}

.small-swal .swal2-confirm {
	background-color: #223e5f !important;
	border-radius: 6px !important;
	padding: 6px 18px !important;
	font-size: 14px !important;
}

.small-swal-cancel-btn {
	background-color: #6c757d !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 6px 18px !important;
	font-size: 14px !important;
	border: none !important;
}

.small-swal-cancel-btn:hover {
	background-color: #5a6268 !important;
}
.swal2-container {
	z-index: 9999 !important;
}

/* .pass-wrapper {
	position: relative;
	margin-bottom: 12px;
}

.pass-wrapper input {
	width: 100%;
	padding: 8px 36px 8px 10px;
	font-size: 13px;
}

.pass-wrapper i {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #666;
	font-size: 16px;
} */

/* ================= SIDEBAR ================= */
/* .sidebar {
	position: fixed;
	top: 56px;
	left: 0;
	width: 60px;
	height: calc(100vh - 56px);
	background: #f0f0f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20px;
	z-index: 999;
} */

.sidebar {
	position: fixed;
	top: 56px;
	left: 0;
	width: 60px;
	height: calc(100vh - 56px);
	background: #f0f0f0;
	/* background: #f0e8e8f2; */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 20px;
	z-index: 999;
}

.sidebar .menu-item {
	margin: 12px 0;
	cursor: pointer;
}

.sidebar .menu-item i {
	font-size: 22px;
	transition: transform 0.2s ease;
}

.sidebar .menu-item:hover i {
	transform: scale(1.2);
}

/* Sidebar icon colors */
.bi-person-fill {
	color: #2563eb;
}
.bi-people-fill {
	color: #16a34a;
}
.bi-person-lines-fill {
	color: #0ea5e9;
}
.bi-building {
	color: #9333ea;
}
.bi-lightning-fill {
	color: #f97316;
}
.bi-box-seam {
	color: #dc2626;
}

.bi-calendar-event-fill {
	color: #7f39fb;
}

.bi-clipboard-check-fill {
	color: #28a745;
}

.sidebar-dashboard-icon {
	color: #4f46e5;
}

.sidebar-all-data-icon {
	color: #0891b2; /* cyan-600 */
}

.bi-kanban-fill {
	color: #7c3aed; /* Elegant Purple */
}
.sidebar-geo-icon {
	color: #0f766e;
}
.sidebar-company-icon {
	color: #1e40af; /* Deep Corporate Blue */
}

/* MENU ITEM LAYOUT */
.sidebar .menu-item {
	margin: 5px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

/* LABEL BELOW ICON */
.sidebar .menu-label {
	font-size: 10px;
	font-weight: 500;
	color: #4b5563; /* subtle gray */
	letter-spacing: 0.3px;
	text-align: center;
}

/* OPTIONAL: subtle hover enhancement */
.sidebar .menu-item:hover .menu-label {
	color: #111827;
}

/* ================= MAIN CONTENT ================= */

/* .main-content {
	margin-left: 60px;
	margin-top: 47px;
	padding: 20px;
} */

.main-content {
	margin-left: 60px;
	margin-top: 25px;
	/* padding: 20px; */
	min-height: calc(100vh - 56px - 7vh);
	/* transition: all 0.3s ease   */
	/* change */
}

/* ================= LAUNCHER PANEL ================= */
.launcher-panel {
	position: fixed;
	top: 60px;
	right: 12px;
	width: 360px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	padding: 16px;
	display: none;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	z-index: 9999;
}

.launcher-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 6px;
	border-radius: 12px;
	cursor: pointer;
	transition:
		background 0.2s ease,
		transform 0.2s ease;
}

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

.launcher-item i {
	font-size: 26px;
	margin-bottom: 6px;
}

.launcher-item span {
	font-size: 13px;
	font-weight: 500;
	color: #1f2937;
}

/* Launcher icon colors */
.icon-admin {
	color: #2563eb;
}
.icon-lead {
	color: #16a34a;
}
.icon-contact {
	color: #0ea5e9;
}
.icon-account {
	color: #9333ea;
}
.icon-opportunity {
	color: #f97316;
}
.icon-product {
	color: #dc2626;
}
.icon-calendar {
	color: #7f39fb;
}
.icon-task {
	color: #28a745;
}
.icon-report {
	color: #0891b2; /* teal-700 */
}

.launcher-dashboard-icon {
	color: #4f46e5;
}

/* submenu */

/* ================= SUBMENU BAR ================= */
.submenu-bar {
	position: fixed;
	top: 56px;
	left: 60px;
	width: calc(100% - 60px);
	height: 48px;
	background: #f0f0f0;
	/* background: #f0e8e8f2; */

	display: none;
	/* display: flex;
	visibility: hidden; */
	align-items: center;
	padding: 0 20px;
	z-index: 998;
}

/* .submenu-group {
	display: none;
	gap: 20px;
} */

.submenu-item {
	font-size: 14px;
	font-weight: 400;
	color: #1f2937;
	cursor: pointer;
	position: relative;
	padding: 6px 4px;
	background: transparent;
}

.submenu-item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background: #2563eb;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

/* ACTIVE TEXT — FIX FOR QUICK CLICK */
.submenu-item.active .submenu-text {
	font-weight: 600 !important;
	color: #1f2937;
}

.submenu-item.active::after {
	transform: scaleX(1);
}

/*  REMOVE hover blue background */
.submenu-item:hover {
	background: transparent;
	color: #1f2937;
}

/* .submenu-group {
	display: none;
	align-items: center;
	gap: 22px;
} */

.submenu-group {
	display: none;
	align-items: center;
	gap: 20px;
	min-height: 48px;
}

.submenu-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* text */
.submenu-text {
	font-size: 14px;
	font-weight: 400;
	color: #1f2937;
	cursor: pointer;
	position: relative;
	padding-bottom: 6px;
}

.submenu-item.active .submenu-text::after {
	transform: scaleX(1);
}

/* chevron */
.submenu-chevron {
	cursor: pointer;
	display: flex;
	align-items: center;
}

.submenu-chevron i {
	font-size: 14px;
	color: #2563eb;
	transition: transform 0.25s ease;
}

.submenu-item.open .submenu-chevron i {
	transform: rotate(180deg);
}

/* ================= DROPDOWN CARD ================= */
.submenu-dropdown {
	position: fixed;
	top: 104px;
	left: 140px;
	width: 260px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	display: none;
	font-family: "Segoe UI", Arial, sans-serif;
}

.dropdown-header {
	padding: 10px 14px;
	font-weight: 600;
	color: #2563eb;
	border-bottom: 1px solid #e5e7eb;
	cursor: pointer;
}

.dropdown-section-title {
	padding: 8px 14px;
	font-size: 12px;
	color: #6b7280;
}

.dropdown-item {
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}

.dropdown-item:hover {
	background: #f3f6fb;
	color: #2563eb;
}

/* Container to stack Name and Tagline */
.header-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* Keeps text flushed to the right */
	justify-content: center;
}

.logo-text {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	/* font-style: italic; */
	margin: 0;
	line-height: 1;

	/* background: linear-gradient(to bottom, #ff0000 0%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.2)); */
}

.tagline {
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	margin: 2px 0 0 0;
	font-style: normal;
}

.navbar-custom .container-fluid {
	display: flex;
	align-items: center;
	gap: 10px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: transparent !important;

	border: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 5px 3px;
}

/* NEW CSS FOR FOOTER */
/* ================= FOOTER STYLES ================= */
.app-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 5vh; /* Slim height as per image */
	background: linear-gradient(135deg, #223e5f 0%, #2c4f73 45%, #7b8fa1 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	z-index: 1050; /* Above sidebar and content */
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
	padding: 0 15px;
}

.footer-text {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* Adjust Sidebar and Main Content to prevent overlap */
/* .sidebar {
	height: calc(100vh - 56px - 30px); 
} */

.error-msg {
	font-size: 12px;
	display: block;
	margin-top: 3px;
}

.pass-wrapper {
	position: relative;
}

.pass-wrapper i {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

/* Select2 container same bootstrap select jaisa */
.select2-container--default .select2-selection--single {
	height: 38px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	padding: 5px 10px;
	display: flex;
	align-items: center;
}

/* text alignment */
.select2-container--default
	.select2-selection--single
	.select2-selection__rendered {
	line-height: normal;
	padding-left: 0;
	color: #495057;
}

/* arrow position */
.select2-container--default
	.select2-selection--single
	.select2-selection__arrow {
	height: 100%;
	right: 8px;
}

/* dropdown style */
.select2-dropdown {
	border-radius: 6px;
	border: 1px solid #ced4da;
}

/* search box style */
.select2-search--dropdown .select2-search__field {
	border-radius: 6px;
	border: 1px solid #ced4da;
	padding: 6px 10px;
}

/* width fix */
.select2-container {
	width: 100% !important;
}

.filter-icon {
	color: #0b5ed7 !important; /* Default color */
	transition: all 0.3s ease; /* Smooth transition */
}
.filter-icon:hover {
	transform: scale(1.2); /* Slight zoom */
}



/* location icon css */

		.location-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #2c3e50; /* match your theme */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	transition: 0.3s;
}

.location-circle:hover {
	background: #1abc9c;
}

#mapContainer {
    height: 100%; /* Important: Leaflet needs a height to show up */
    min-height: 400px;
    background: #f8f9fa;
}

/* Optional: Make the Layer Control look cleaner */
.leaflet-control-layers {
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.notification-dropdown {
  position: absolute;
  right: 0;
  top: 40px;
  width: 300px;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 999;
}

/* .notification-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
} */

.notification-dropdown {
  position: absolute;
  right: 0;
  top: 46px;
  width: 340px;
  max-height: 460px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  z-index: 1000;
}

.notification-dropdown::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 20px;
	width: 12px;
	height: 12px;
	background: #ffffff;
	border-top: 1px solid #dbe4f0;
	border-left: 1px solid #dbe4f0;
	transform: rotate(45deg);
}

.notification-dropdown > .p-2.border-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px !important;
	border-bottom: 1px solid #e5edf6 !important;
	background: linear-gradient(180deg, rgba(37, 99, 235, 0.07), transparent);
	border-top-left-radius: 18px;
	border-top-right-radius: 18px;
}

.notification-dropdown > .p-2.border-bottom .fw-bold {
	font-size: 15px;
	font-weight: 700 !important;
	color: #173554;
}

#markAllBtn {
	padding: 6px 10px;
	border-radius: 10px;
	border: none;
	background: linear-gradient(135deg, #1d6fe8, #3b82f6);
	box-shadow: 0 8px 16px rgba(29, 111, 232, 0.2);
	font-size: 12px;
	font-weight: 700;
}

#notificationList {
	max-height: 390px;
	overflow-y: auto;
}

#notificationList::-webkit-scrollbar {
	width: 7px;
}

#notificationList::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
}

.notification-item {
	padding: 14px 16px;
	border-bottom: 1px solid #eaf0f6;
	background: transparent;
	color: #0f172a;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.notification-item:last-child {
	border-bottom: none;
}

.notification-item:hover {
	background: #f8fbff;
}

.notification-item.is-unread {
	background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03));
}

.notification-item.is-read {
	opacity: 0.72;
}

.notification-item-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
}

.notification-item-title {
	font-size: 14px;
	font-weight: 700;
	color: #173554;
	line-height: 1.3;
}

.notification-item-body {
	font-size: 12px;
	line-height: 1.45;
	color: #64748b;
}

.notification-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #2563eb;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}



.side-panel {
    position: absolute;
    top: 120px;
    left: 80px;
    width: 190px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    padding: 6px 0;
    z-index: 1000;

    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.side-panel.show {
    opacity: 1;
    visibility: visible;
}

.side-panel-title {
    font-weight: 600;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.side-panel-item {
    padding: 6px 12px;
	 font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.side-panel-item:hover {
    background: #f5f5f5;
}

.side-panel-item.active {
    background: #e0edff;
    color: #0b5ed7;
    font-weight: 500;
    border-left: 3px solid #0b5ed7;
}

.side-panel-item {
    display: flex;
    align-items: center;
    gap: 8px; /* space between icon & text */
}

.side-panel-item i {
    font-size: 14px;
    width: 16px; /* align all icons */
}
#accountPanel {
    top: 160px; /* different position */
}

#taskPanel{
	top: 190px;
}