/*
 * v3-layout.css — Menu & Layout redesign (Matdash-inspired)
 * Loaded after v3.css. Overrides Bootstrap 3 template chrome.
 */


/* ============================================
   1. LEFT SIDEBAR
   ============================================ */

.page-sidebar {
	background: var(--v3-sidebar-bg) !important;
	border-right: 1px solid #fff !important;
	width: var(--v3-sidebar-width) !important;
	overflow-x: hidden !important;
}

.page-sidebar .page-sidebar-wrapper {
	background: transparent !important;
	overflow-x: hidden !important;
	width: 100% !important;
	padding-right: 4px;
}

/* Hide legacy profile */
.page-sidebar .user-info-wrapper {
	display: none !important;
}

/* --- Avatar / Profile --- */
.v3-user-profile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--v3-sidebar-border);
	position: relative;
	text-align: left;
}

.v3-avatar-container {
	width: var(--v3-avatar-size);
	height: var(--v3-avatar-size);
	margin: 0;
	flex-shrink: 0;
	border-radius: 50%;
	border: var(--v3-avatar-border);
	overflow: hidden;
	position: relative;
	cursor: pointer;
	transition: transform var(--v3-transition);
}

.v3-avatar-container:hover {
	transform: scale(1.05);
}

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

.v3-avatar-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--v3-avatar-bg);
	color: var(--v3-primary);
	font-size: 16px;
	font-weight: 700;
}

.v3-avatar-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--v3-transition);
	color: #fff;
	font-size: 18px;
}

.v3-avatar-container:hover .v3-avatar-overlay {
	opacity: 1;
}

.v3-user-info {
	min-width: 0;
}

.v3-user-name {
	color: var(--v3-sidebar-text);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.v3-user-rank {
	color: var(--v3-sidebar-section-text);
	font-size: 11px;
	text-transform: capitalize;
}

/* Avatar modal */
.avatar-modal .modal-dialog {
	max-width: 380px;
	margin: 80px auto;
}

.avatar-modal .modal-header {
	border-bottom: 1px solid #eee;
	padding: 12px 16px;
}

.avatar-modal .modal-header .modal-title {
	font-size: 15px;
	font-weight: 600;
}

.avatar-modal .modal-body {
	padding: 20px;
}

.avatar-step {
	display: none;
}

.avatar-step.active {
	display: block;
}

.avatar-step-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.avatar-step-footer {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #eee;
}

.avatar-modal-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #374151;
	font-size: 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
	text-align: left;
}

.avatar-modal-btn:hover {
	background: #f3f4f6;
	border-color: #d1d5db;
}

.avatar-modal-btn i {
	font-size: 18px;
	width: 22px;
	text-align: center;
	color: #6b7280;
}

.avatar-modal-btn:hover i {
	color: var(--v3-primary);
}

.avatar-modal-btn.primary {
	background: var(--v3-primary);
	color: #fff;
	border-color: var(--v3-primary);
}

.avatar-modal-btn.primary:hover {
	opacity: 0.9;
}

.avatar-modal-btn.primary i {
	color: #fff;
}

.avatar-modal-btn.btn-ai {
	color: #fff;
	border-color: transparent;
}

.avatar-modal-btn.btn-ai i {
	color: #fff;
}

.avatar-modal-btn.danger {
	border-color: transparent;
	background: transparent;
	color: #ef4444;
	padding: 8px 16px;
	font-size: 13px;
}

.avatar-modal-btn.danger:hover {
	background: rgba(239, 68, 68, 0.08);
}

.avatar-modal-btn.danger i {
	color: #ef4444;
}

.avatar-modal-btn.back-link {
	border: none;
	background: transparent;
	color: #6b7280;
	font-size: 13px;
	padding: 8px 0;
	margin-top: 8px;
	justify-content: center;
}

.avatar-modal-btn.back-link:hover {
	color: var(--v3-primary);
}

.avatar-modal-btn.back-link i {
	color: inherit;
}

/* Camera step */
.avatar-camera-wrap {
	border-radius: 8px;
	overflow: hidden;
	background: #000;
	margin-bottom: 12px;
}

.avatar-camera-wrap video {
	width: 100%;
	display: block;
	transform: scaleX(-1);
}

.avatar-camera-actions {
	display: flex;
	gap: 8px;
	justify-content: space-between;
}

/* Preview step */
.avatar-preview-wrap {
	text-align: center;
	margin-bottom: 16px;
}

.avatar-preview-wrap img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #e5e7eb;
}

.avatar-preview-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.v3-avatar-loading {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 5;
}

.v3-avatar-loading.active {
	display: flex;
}

.v3-avatar-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: v3-spin 0.6s linear infinite;
}

@keyframes v3-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Section Titles --- */
.page-sidebar .menu-title {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--v3-sidebar-section-text) !important;
	padding: 20px 16px 8px !important;
	margin: 0 !important;
	background: transparent !important;
	line-height: 26px;
}

/* --- Menu Items --- */
.page-sidebar .page-sidebar-wrapper > ul {
	padding: 4px 0 !important;
	margin: 0 !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li {
	margin: 2px 12px !important;
	border-radius: var(--v3-sidebar-item-radius) !important;
	background: transparent !important;
	list-style: none !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li > a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 11px 16px !important;
	border-radius: var(--v3-sidebar-item-radius) !important;
	color: var(--v3-sidebar-text) !important;
	text-decoration: none !important;
	transition: all var(--v3-transition) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	background: transparent !important;
	margin-bottom: 2px;
}

.page-sidebar .page-sidebar-wrapper > ul > li > a:hover {
	background: var(--v3-sidebar-bg-hover) !important;
	color: var(--v3-sidebar-text-hover) !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li.active > a,
.page-sidebar .page-sidebar-wrapper > ul > li > a.active {
	background: var(--v3-primary-100) !important;
	color: var(--v3-primary) !important;
	box-shadow: none;
	font-weight: 600 !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li.open > a {
	background: transparent !important;
	color: var(--v3-primary) !important;
	font-weight: 600 !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li > a > i {
	font-size: 20px !important;
	width: 24px;
	text-align: center;
	flex-shrink: 0;
	color: inherit !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li > a > .title {
	color: inherit !important;
	font-size: inherit !important;
}

/* Override legacy dark styles from style.css */
.page-sidebar .page-sidebar-wrapper > ul > li.open > a,
.page-sidebar .page-sidebar-wrapper > ul > li:hover > a {
	background: var(--v3-sidebar-bg-hover) !important;
	color: var(--v3-sidebar-text-hover) !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li.active > a {
	background: var(--v3-primary-100) !important;
	color: var(--v3-primary) !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li.open > a {
	background: transparent !important;
	color: var(--v3-primary) !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li:hover > a i,
.page-sidebar .page-sidebar-wrapper > ul > li.open > a i,
.page-sidebar .page-sidebar-wrapper > ul > li.active > a i {
	color: inherit !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li.active > a .arrow:before,
.page-sidebar .page-sidebar-wrapper > ul > li.open > a .arrow:before {
	color: var(--v3-primary) !important;
}

/* --- Sub-menus with bullet dots --- */
.page-sidebar ul.sub-menu {
	background: transparent !important;
	border-left: none !important;
	margin-left: 20px !important;
	padding: 4px 0 !important;
}

.page-sidebar ul.sub-menu > li {
	margin: 0 !important;
	list-style: none !important;
}

.page-sidebar ul.sub-menu > li > a {
	padding: 8px 16px !important;
	color: var(--v3-sidebar-text) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	display: flex !important;
	align-items: center;
	border-radius: var(--v3-radius-sm);
	transition: all var(--v3-transition);
	text-decoration: none !important;
}

.page-sidebar ul.sub-menu > li > a:hover {
	color: var(--v3-sidebar-text-hover) !important;
	background: transparent !important;
}

.page-sidebar ul.sub-menu > li.active > a,
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu > li.active > a,
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu > li > a:hover {
	color: var(--v3-primary) !important;
	font-weight: 500;
	background: transparent !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu > li > a {
	padding-left: 20px !important;
}

.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu li > ul.sub-menu > li.active > a,
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
.page-sidebar .page-sidebar-wrapper > ul > li > ul.sub-menu li.open > a {
	color: var(--v3-primary) !important;
	background: transparent !important;
}

.page-sidebar ul.sub-menu > li > a::before {
	display: none;
}

/* --- Arrow indicator (CSS-only chevron, overrides legacy FA arrows from style.css) --- */
.page-sidebar .arrow,
.page-sidebar .arrow.open {
	display: inline-flex !important;
	align-items: center !important;
	margin-left: auto !important;
	float: none !important;
}

.page-sidebar .arrow::before,
.page-sidebar .arrow.open::before,
.page-sidebar .page-sidebar-wrapper > ul > li > a > .arrow::before,
.page-sidebar .page-sidebar-wrapper > ul > li > a > .arrow.open::before,
.page-sidebar .page-sidebar-wrapper ul > li > a > .arrow::before,
.page-sidebar ul > li > a > .arrow::before {
	font-family: inherit !important;
	content: '' !important;
	display: block !important;
	width: 7px !important;
	height: 7px !important;
	border-right: 2px solid var(--v3-sidebar-section-text) !important;
	border-bottom: 2px solid var(--v3-sidebar-section-text) !important;
	border-left: none !important;
	border-top: none !important;
	transform: rotate(-45deg) !important;
	transition: transform 0.2s ease, border-color 0.2s ease !important;
	float: none !important;
	font-size: 0 !important;
	margin: 0 !important;
}

.page-sidebar li.open > a > .arrow::before,
.page-sidebar li.open > a > .arrow.open::before,
.page-sidebar .page-sidebar-wrapper > ul > li.open > a > .arrow::before,
.page-sidebar .page-sidebar-wrapper > ul > li > a > .arrow.open::before,
.page-sidebar .page-sidebar-wrapper ul > li > a > .arrow.open::before {
	transform: rotate(45deg) !important;
}

.page-sidebar li.open > a > .arrow::before,
.page-sidebar li.active > a > .arrow::before,
.page-sidebar .page-sidebar-wrapper > ul > li.open > a > .arrow::before,
.page-sidebar .page-sidebar-wrapper > ul > li.active > a > .arrow::before {
	border-color: var(--v3-primary) !important;
}

/* --- Integrations --- */
.v3-integration-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.v3-integration-badge.active {
	background: var(--v3-success);
	box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.v3-integration-badge.inactive {
	background: #cbd5e1;
}

.page-sidebar .status-icon {
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	display: inline-block !important;
}

.page-sidebar .status-icon.green {
	background: var(--v3-success) !important;
}

.page-sidebar .status-icon.red {
	background: #cbd5e1 !important;
}

.page-sidebar .sidemenu-sc > li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
}

.page-sidebar .sidemenu-sc h6 {
	color: var(--v3-sidebar-text) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	display: inline-block !important;
	align-items: center;
	gap: 8px;
	width: 80px !important;
	padding: 0;
	margin-bottom: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

.page-sidebar .sidemenu-sc.dots-integration h6 {
	display: flex !important;
}

.page-sidebar .sidemenu-sc.dots-integration h6 b {
	min-width: 180px !important;
}

.page-sidebar .sidemenu-sc h6 b {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400 !important;
	color: var(--v3-sidebar-text) !important;
}

.page-sidebar .sidemenu-sc h6 i {
	font-size: 17px;
	width: 20px;
	text-align: center;
	color: var(--v3-sidebar-section-text) !important;
	margin: 0 !important;
}

.page-sidebar .sidemenu-sc input[type="number"] {
	background: var(--v3-bg-secondary);
	border: 1px solid var(--v3-sidebar-border);
	border-radius: 8px;
	color: var(--v3-text);
	padding: 4px 8px;
	font-size: 12px;
	flex: 1;
	min-width: 0;
}

.page-sidebar .sidemenu-sc .btn-sc {
	color: var(--v3-sidebar-section-text) !important;
	transition: color var(--v3-transition);
	flex-shrink: 0;
}

.page-sidebar .sidemenu-sc .btn-sc:hover {
	color: var(--v3-primary) !important;
}

/* --- Version & Footer --- */
.page-sidebar .text-center.m-b-20 a {
	display: inline-block;
	background: var(--v3-bg-secondary);
	border-radius: 20px;
	padding: 4px 14px;
	color: var(--v3-sidebar-section-text) !important;
	font-size: 11px;
	transition: all var(--v3-transition);
}

.page-sidebar .text-center.m-b-20 a:hover {
	background: var(--v3-sidebar-bg-hover);
	color: var(--v3-primary) !important;
}

.footer-widget {
    background: #ffffff !important;
    padding: 12px 16px !important;
    box-shadow: 0px -4px 13px 0px #0000001c;
}

.footer-widget span {
	font-size: 10px !important;
	color: var(--v3-sidebar-section-text) !important;
}

/* --- Mini Sidebar --- */
.page-sidebar.mini,
html.condense-menu .page-sidebar,
body.condense-menu .page-sidebar {
	width: var(--v3-sidebar-mini) !important;
	background: var(--v3-sidebar-bg) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

/* Transition fluide */
.page-sidebar {
	transition: width 0.2s ease !important;
}

.page-content {
	transition: margin-left 0.2s ease !important;
}

/* Content shift */
html.condense-menu .page-content,
body.condense-menu .page-content {
	margin-left: var(--v3-sidebar-mini) !important;
}

/* Override legacy style.css that hides header-seperation in condensed mode */
html.condense-menu .header-seperation,
body.condense-menu .header-seperation {
	display: flex !important;
}

/* Hide textes, sections, footer */
.page-sidebar.mini .menu-title,
.page-sidebar.mini .v3-user-info,
.page-sidebar.mini .title,
.page-sidebar.mini .arrow,
.page-sidebar.mini .sidemenu-sc,
.page-sidebar.mini .text-center.m-b-20,
.page-sidebar.mini .footer-widget {
	display: none !important;
}

/* Avatar centré */
.page-sidebar.mini .v3-user-profile {
	padding: 12px 0 !important;
	justify-content: center;
}

.page-sidebar.mini .v3-avatar-container {
	margin: 0 auto !important;
	width: 48px;
	height: 48px;
}

/* Scrollbar en mini */
.page-sidebar.mini .page-sidebar-wrapper {
	overflow-x: hidden !important;
	overflow-y: visible !important;
	padding-right: 0 !important;
	height: auto !important;
}

/* Menu items — icônes centrées */
.page-sidebar.mini .page-sidebar-wrapper > ul {
	width: auto !important;
	padding: 4px 0 !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li {
	margin: 2px 8px !important;
	position: relative !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li > a {
	justify-content: center !important;
	padding: 12px !important;
	gap: 0 !important;
	border-radius: var(--v3-sidebar-item-radius) !important;
	color: var(--v3-sidebar-text) !important;
	background: transparent !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li > a > i {
	margin: 0 !important;
	font-size: 22px !important;
	color: var(--v3-sidebar-text) !important;
}

/* Hover & active — override legacy teal */
.page-sidebar.mini .page-sidebar-wrapper > ul > li > a:hover,
.page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > a {
	background: var(--v3-sidebar-bg-hover) !important;
	color: var(--v3-sidebar-text-hover) !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > a > i {
	color: var(--v3-sidebar-text-hover) !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li.active > a {
	background: var(--v3-primary-100) !important;
	color: var(--v3-primary) !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li.active > a > i {
	color: var(--v3-primary) !important;
}

/* Tooltip for single items (no sub-menu) in mini mode */
.page-sidebar.mini .mini-tooltip {
	position: fixed;
	left: var(--v3-sidebar-mini);
	margin-left: 6px;
	background: var(--v3-bg-surface);
	color: var(--v3-sidebar-text);
	border: 1px solid var(--v3-sidebar-border);
	border-radius: var(--v3-radius);
	box-shadow: var(--v3-shadow-dropdown);
	padding: 6px 12px;
	font-size: 13px;
	white-space: nowrap;
	z-index: 1100;
	pointer-events: none;
}

/* Sub-menus cachés en mini, popup on hover */
.page-sidebar.mini .page-sidebar-wrapper > ul > li > ul.sub-menu {
	display: none !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li > ul.sub-menu.mini-open {
	display: block !important;
	position: fixed !important;
	left: var(--v3-sidebar-mini) !important;
	min-width: 200px !important;
	background: var(--v3-bg-surface) !important;
	border: 1px solid var(--v3-sidebar-border) !important;
	border-radius: var(--v3-radius) !important;
	box-shadow: var(--v3-shadow-dropdown) !important;
	padding: 8px 0 !important;
	z-index: 1100 !important;
	margin: 0 !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > ul.sub-menu > li {
	margin: 0 !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > ul.sub-menu > li > a {
	padding: 8px 16px !important;
	color: var(--v3-sidebar-text) !important;
	background: transparent !important;
	font-size: 13px !important;
	display: block !important;
}

.page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > ul.sub-menu > li > a:hover {
	color: var(--v3-primary) !important;
	background: var(--v3-sidebar-bg-hover) !important;
}

/* Legacy label badge in mini */
.page-sidebar.mini .page-sidebar-wrapper > ul > li a > .label {
	display: none !important;
}

/* --- Scrollbar (jquery-scrollbar plugin) — hidden until sidebar hover --- */
.page-sidebar .scroll-element {
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}

.page-sidebar:hover .scroll-element {
	opacity: 1 !important;
}

/* Webkit native fallback */
.page-sidebar .page-sidebar-wrapper::-webkit-scrollbar {
	width: 4px;
}

.page-sidebar .page-sidebar-wrapper::-webkit-scrollbar-track {
	background: transparent;
}

.page-sidebar .page-sidebar-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.08);
	border-radius: 4px;
}

.page-sidebar .page-sidebar-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.15);
}


/* ============================================
   2. TOP BAR
   ============================================ */

.header.navbar {
	min-height: var(--v3-header-height) !important;
	background: var(--v3-bg-surface) !important;
	border: none !important;
}

.header .navbar-inner {
	background: var(--v3-bg-surface) !important;
	min-height: var(--v3-header-height) !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
}

/* Kill legacy dark backgrounds */
.header-seperation,
.header .header-seperation,
div.header-seperation,
.header .navbar-inner .header-seperation {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	height: var(--v3-header-height) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 8px 0 12px !important;
}

.header .notifcation-center,
.header .header-seperation .notifcation-center {
	background: transparent !important;
	background-color: transparent !important;
	margin-top: 0 !important;
}

.header .h-seperate {
	display: none !important;
}

#main-menu-toggle-wrapper {
	display: none !important;
}

/* Home button */
.v3-home-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--v3-bg-secondary);
	transition: all var(--v3-transition);
	text-decoration: none;
}

.v3-home-btn:hover {
	background: var(--v3-bg-primary-subtle);
}

.v3-home-btn i {
	color: var(--v3-text);
	font-size: 18px;
}

.v3-home-btn:hover i {
	color: var(--v3-primary);
}

/* Legacy iconset sprites — kill */
.header .iconset.top-home,
.header .iconset.top-chat-white {
	background-image: none !important;
	width: auto !important;
	height: auto !important;
}

/* Header quick-nav layout */
.header .header-quick-nav {
	height: var(--v3-header-height) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex: 1 !important;
	border: none !important;
	padding: 0 12px !important;
}

.header .header-quick-nav > .pull-left {
	display: flex !important;
	align-items: center !important;
	gap: 4px;
	float: none !important;
}

.header .header-quick-nav > .pull-right {
	display: flex !important;
	align-items: center !important;
	float: none !important;
	margin-left: auto !important;
}

.header .header-quick-nav > .pull-right > .nav.quick-section {
	display: flex !important;
	align-items: center !important;
	gap: 2px;
	margin: 0 !important;
	padding: 0 !important;
}

/* Action icon buttons (40px round) */
.header .quicklinks {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.header .quicklinks > a,
.header .quicklinks > div:not(.simple-chat-popup) {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: all var(--v3-transition);
	cursor: pointer;
}

.header .quicklinks > a:hover,
.header .quicklinks > div:not(.simple-chat-popup):hover {
	background: var(--v3-bg-secondary) !important;
}

.header .quicklinks i {
	font-size: 20px !important;
	color: var(--v3-topbar-icon-color) !important;
	transition: color var(--v3-transition);
}

.header .quicklinks > a:hover i,
.header .quicklinks > div:not(.simple-chat-popup):hover i {
	color: var(--v3-primary) !important;
}

.header .quicklinks.hide {
	display: none !important;
}

.header .v3-icon-ai {
	color: #6366f1 !important;
}

/* Hamburger toggle */
#layout-condensed-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: all var(--v3-transition);
	padding: 0 !important;
}

#layout-condensed-toggle:hover {
	background: var(--v3-bg-secondary) !important;
}

/* Nav section buttons (topnav) — desktop only */
.v3-topnav-section {
	margin: 0;
	display: flex;
	align-items: center;
}

.v3-topnav-section > .topnav {
	display: flex;
	align-items: center;
}

.topnav .btn-nav {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	background: transparent !important;
	color: var(--v3-topbar-icon-color) !important;
	transition: all 0.15s ease !important;
	margin: 0 1px !important;
	min-width: 38px !important;
	width: 38px !important;
	height: 38px !important;
	white-space: nowrap;
	line-height: 1;
}

.topnav .btn-nav:hover {
	background: var(--v3-bg-secondary) !important;
	color: var(--v3-text) !important;
}

.topnav .btn-nav.active {
	background: var(--v3-bg-secondary) !important;
	color: var(--v3-text) !important;
	border-radius: 10px !important;
	width: auto !important;
	min-width: auto !important;
	gap: 6px;
	padding: 7px 14px !important;
}

.topnav .btn-nav i {
	font-size: 19px !important;
	color: inherit !important;
	flex-shrink: 0;
}

.topnav .btn-nav .depart {
	display: none !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: inherit !important;
}

.topnav .btn-nav.active .depart {
	display: inline !important;
}

/* Logo */
.header .logo {
	max-height: 38px;
}

/* Responsive logo (hidden desktop, shown responsive) */
.v3-responsive-logo {
	display: none;
}

/* Chat badge (match notification bell style) */
.header #chat-menu-toggle {
	position: relative;
}
.header #chat-menu-toggle #chat-message-count {
	position: absolute !important;
	top: 2px !important;
	right: 0 !important;
	min-width: 16px !important;
	height: 16px !important;
	padding: 1px 5px !important;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	background: #f44336 !important;
	color: #fff !important;
	text-align: center;
	text-shadow: none !important;
}
.header #chat-menu-toggle #chat-message-count.hide {
	display: none !important;
}

/* Chat popup auto-hide */
.simple-chat-popup:not(.hide) {
	animation: v3-popup-autohide 5s ease forwards;
}

@keyframes v3-popup-autohide {
	0% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		pointer-events: none;
	}
}


/* ============================================
   3. RIGHT SIDEBAR
   ============================================ */

.sidebar-unified .sidebar-mini-nav {
	padding: 10px 8px !important;
	gap: 4px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.sidebar-unified .sidebar-tab {
	border-radius: var(--v3-radius-sm) !important;
	padding: 8px !important;
	transition: all var(--v3-transition) !important;
}

.sidebar-unified .sidebar-tab:hover {
	background: var(--v3-rsidebar-tab-bg) !important;
}

.sidebar-unified .sidebar-tab.active {
	background: var(--v3-rsidebar-tab-active) !important;
	color: #fff !important;
}

.sidebar-unified .sidebar-tab i {
	font-size: 17px !important;
}

.sidebar-unified .sidebar-tab span {
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.sidebar-unified .sidebar-section-title {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.4) !important;
}

.sidebar-unified .sidebar-close,
.sidebar-unified .sidebar-logout {
	transition: all var(--v3-transition) !important;
	border-radius: var(--v3-radius-sm) !important;
}

.sidebar-unified .sidebar-close:hover,
.sidebar-unified .sidebar-logout:hover {
	background: var(--v3-rsidebar-tab-bg) !important;
}

.sidebar-resize-handle {
	transition: background var(--v3-transition) !important;
}

.sidebar-resize-handle:hover {
	background: linear-gradient(90deg, rgba(99, 102, 241, 0.0), rgba(99, 102, 241, 0.25)) !important;
}

.sidebar-unified .sidebar-input-wrapper textarea {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: var(--v3-radius-sm) !important;
	color: #e2e8f0 !important;
}

.sidebar-unified .sidebar-input-wrapper textarea:focus {
	border-color: var(--v3-primary) !important;
	outline: none !important;
}

.sidebar-unified .sidebar-input-wrapper button {
	border-radius: var(--v3-radius-sm) !important;
}


/* ============================================
   4. FA-TO-TABLER FALLBACK
   ============================================ */

/* FA catch-all removed — icons migrated to Tabler in DB */
.page-sidebar i[class^="ti ti-"],
.header i[class^="ti ti-"],
.sidebar-unified i[class^="ti ti-"] {
	font-style: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}


/* ============================================
   5. PAGE CONTENT
   ============================================ */

.page-content {
	margin-left: var(--v3-sidebar-width) !important;
	background-color: var(--v3-bg-surface) !important;
}

.page-content > .content,
.page-content > form > .content {
	background-color: var(--v3-bg-content);
	border-top-left-radius: 20px;
	min-height: calc(100vh - var(--v3-header-height));
	margin-top: var(--v3-header-height) !important;
	padding-top: 23px !important;
	box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.06);
	padding-bottom: 100px;
}

/* Agenda/planning pages: no side/top padding */
.page-content > .content.content-flush,
.page-content > form > .content.content-flush {
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-top: 0 !important;
}

html.condense-menu .page-content,
body.condense-menu .page-content {
	margin-left: var(--v3-sidebar-mini) !important;
}


/* ============================================
   6. RESPONSIVE (≤1280px)
   Hide nav sections, show centered logo, sidebar off-canvas
   ============================================ */

@media (max-width: 1280px) {
	/* Hide logo zone */
	.header .navbar-inner > .header-seperation.header-seperation {
		display: none !important;
	}

	/* Quick-nav full width */
	.header .navbar-inner > .header-quick-nav.header-quick-nav {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		height: var(--v3-header-height) !important;
		padding: 0 12px !important;
	}

	/* HIDE nav section buttons — use high specificity to beat global rules */
	.header .header-quick-nav .v3-topnav-section,
	.header .header-quick-nav .v3-topnav-section > .topnav,
	.header .header-quick-nav .v3-topnav-section > li.topnav,
	ul.nav.quick-section.v3-topnav-section,
	ul.v3-topnav-section > li {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		pointer-events: none !important;
	}

	/* Show responsive logo */
	.v3-responsive-logo {
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.v3-responsive-logo .logo {
		max-height: 34px;
	}

	/* Sidebar off-canvas */
	.page-sidebar,
	#main-menu {
		width: var(--v3-sidebar-width) !important;
		position: fixed !important;
		left: calc(-1 * var(--v3-sidebar-width)) !important;
		transition: left 0.3s ease !important;
		z-index: 1001 !important;
		top: var(--v3-header-height) !important;
		height: calc(100vh - var(--v3-header-height)) !important;
		margin-top: 0 !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.page-sidebar.opened,
	#main-menu.opened {
		left: 0 !important;
	}

	/* Override legacy dark background from responsive.css */
	.page-sidebar.opened {
		background-color: var(--v3-sidebar-bg) !important;
	}

	.page-sidebar.opened .page-sidebar-wrapper > ul > li > a {
		color: var(--v3-sidebar-text) !important;
	}

	.page-sidebar.opened .page-sidebar-wrapper > ul > li a i {
		color: inherit !important;
	}

	.page-sidebar.opened .page-sidebar-wrapper > ul > li.open > a,
	.page-sidebar.opened .page-sidebar-wrapper > ul > li > a:hover,
	.page-sidebar.opened .page-sidebar-wrapper > ul > li:hover > a {
		background: var(--v3-sidebar-bg-hover) !important;
		color: var(--v3-sidebar-text-hover) !important;
	}

	.page-sidebar.opened .page-sidebar-wrapper > ul > li.open > a i,
	.page-sidebar.opened .page-sidebar-wrapper > ul > li > a:hover i,
	.page-sidebar.opened .page-sidebar-wrapper > ul > li:hover > a i {
		color: inherit !important;
	}

	.page-sidebar.opened .page-sidebar-wrapper > ul > li.active > a {
		background: var(--v3-primary-100) !important;
		color: var(--v3-primary) !important;
	}

	.page-sidebar.opened .page-sidebar-wrapper > ul > li.active > a i {
		color: var(--v3-primary) !important;
	}

	.page-sidebar.opened .page-sidebar-wrapper > ul > li > a.open {
		background: transparent !important;
	}

	.page-sidebar.opened .outer-tab-nav-section {
		display: none !important;
	}

	.page-content,
	html.condense-menu .page-content,
	body.condense-menu .page-content {
		margin-left: 0 !important;
	}

	.page-content > .content,
	.page-content > form > .content {
		border-top-left-radius: 0 !important;
	}

	/* Right sidebar off-canvas */
	.chat-window-wrapper {
		right: calc(-1 * var(--rightSidebarWidth, 280px)) !important;
		transition: right 0.3s ease !important;
		z-index: 1001 !important;
		top: var(--v3-header-height) !important;
		height: calc(100vh - var(--v3-header-height)) !important;
	}

	body.open-menu-right .chat-window-wrapper {
		right: 0 !important;
	}

	/* Disable page shift in responsive — sidebar overlays instead */
	body.open-menu-right .page-content,
	body.open-menu-right .header,
	body.open-menu-right .page-sidebar,
	body.open-menu-right .footer-widget {
		transform: none !important;
	}
}

@media (max-width: 767px) {
	.header .logo {
		max-height: 30px;
	}

	.header .quicklinks .dark-menus-toggle,
	.header .quicklinks .lock-session-safe,
	.header .quicklinks [onclick="toggleFullScreen()"],
	.header .quicklinks [href="../template/disconnect.php"] {
		display: none !important;
	}
}

/* Override responsive.css legacy dark styles */
.page-sidebar.opened .page-sidebar-wrapper > ul > li > ul.sub-menu > li > a:hover {
	background: transparent !important;
	color: var(--v3-sidebar-text-hover) !important;
}

.page-sidebar.opened .page-sidebar-wrapper > ul > li > ul.sub-menu > li.active > a {
	color: var(--v3-primary) !important;
	background: transparent !important;
}

.page-sidebar.opened .page-sidebar-wrapper > ul > li > ul.sub-menu li > ul.sub-menu > li.active > a,
.page-sidebar.opened .page-sidebar-wrapper > ul > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
.page-sidebar.opened .page-sidebar-wrapper > ul > li > ul.sub-menu li.open > a {
	color: var(--v3-primary) !important;
	background: transparent !important;
}

/* Sidebar overlay */
.v3-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 1000;
}

.page-sidebar.opened ~ .v3-sidebar-overlay,
#main-menu.opened ~ .v3-sidebar-overlay {
	display: block;
}


/* ============================================
   7. DARK MENUS MODE
   ============================================ */

/* Sidebar border-right (hardcoded #fff in light) */
html.dark-menus .page-sidebar {
	background: linear-gradient(180deg, #1e2332 0%, #212636 50%, #1a1f2c 100%) !important;
	border-right: 1px solid #2a3040 !important;
}

/* page-content bg strip — must match dark sidebar for border-radius to show */
html.dark-menus .page-content {
	background-color: #1b1e24 !important;
}

/* Active menu item — dark-friendly highlight */
html.dark-menus .page-sidebar .page-sidebar-wrapper > ul > li.active > a,
html.dark-menus .page-sidebar .page-sidebar-wrapper > ul > li > a.active {
	background: rgba(37, 99, 235, 0.15) !important;
	color: var(--v3-primary-300) !important;
}

html.dark-menus .page-sidebar .page-sidebar-wrapper > ul > li.active > a i,
html.dark-menus .page-sidebar .page-sidebar-wrapper > ul > li > a.active i {
	color: var(--v3-primary-300) !important;
}

html.dark-menus .page-sidebar .page-sidebar-wrapper > ul > li.active > a .arrow::before,
html.dark-menus .page-sidebar .page-sidebar-wrapper > ul > li.open > a .arrow::before {
	border-color: var(--v3-primary-300) !important;
}

/* Mini sidebar active */
html.dark-menus .page-sidebar.mini .page-sidebar-wrapper > ul > li.active > a {
	background: rgba(37, 99, 235, 0.15) !important;
	color: var(--v3-primary-300) !important;
}

html.dark-menus .page-sidebar.mini .page-sidebar-wrapper > ul > li.active > a > i {
	color: var(--v3-primary-300) !important;
}

/* Mini sidebar sub-menu popup — dark bg */
html.dark-menus .page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > ul.sub-menu {
	background: #222731 !important;
	border-color: #2a3040 !important;
}

html.dark-menus .page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > ul.sub-menu > li > a {
	color: #c8d0da !important;
}

html.dark-menus .page-sidebar.mini .page-sidebar-wrapper > ul > li:hover > ul.sub-menu > li > a:hover {
	color: #ffffff !important;
	background: #252a35 !important;
}

/* Avatar modal — dark mode */
html.dark-menus .avatar-modal .modal-content {
	background: #222731 !important;
	border-color: #2a3040 !important;
}

html.dark-menus .avatar-modal .modal-header {
	border-color: #2a3040 !important;
}

html.dark-menus .avatar-modal .modal-title {
	color: #e5e7eb !important;
}

html.dark-menus .avatar-step-footer {
	border-color: #2a3040 !important;
}

html.dark-menus .avatar-modal-btn {
	background: #1a1f2b !important;
	border-color: #2a3040 !important;
	color: #c8d0da !important;
}

html.dark-menus .avatar-modal-btn:hover {
	background: #252a35 !important;
	color: #fff !important;
}

html.dark-menus .avatar-modal-btn.primary {
	background: var(--v3-primary) !important;
	color: #fff !important;
	border-color: var(--v3-primary) !important;
}

html.dark-menus .avatar-modal-btn.btn-ai {
	border-color: transparent !important;
	color: #fff !important;
}

html.dark-menus .avatar-modal-btn.danger {
	background: transparent !important;
	border-color: transparent !important;
}

html.dark-menus .avatar-modal-btn.back-link {
	background: transparent !important;
	border-color: transparent !important;
	color: #6b7280 !important;
}

html.dark-menus .avatar-preview-wrap img {
	border-color: #2a3040 !important;
}

/* Arrow chevrons */
html.dark-menus .page-sidebar .arrow::before,
html.dark-menus .page-sidebar .page-sidebar-wrapper > ul > li > a > .arrow::before,
html.dark-menus .page-sidebar .page-sidebar-wrapper ul > li > a > .arrow::before {
	border-color: #5a6a80 !important;
}

/* Avatar image — no modification in dark mode */

/* Home btn + hamburger in dark topbar */
html.dark-menus #layout-condensed-toggle i,
html.dark-menus .v3-home-btn i {
	color: #c8d0da !important;
}

html.dark-menus #layout-condensed-toggle:hover,
html.dark-menus .v3-home-btn:hover {
	background: #252a35 !important;
}

html.dark-menus #layout-condensed-toggle:hover i,
html.dark-menus .v3-home-btn:hover i {
	color: var(--v3-primary) !important;
}

/* Version badge */
html.dark-menus .page-sidebar .text-center.m-b-20 a {
	background: #252a35 !important;
	color: #5a6a80 !important;
}

html.dark-menus .page-sidebar .text-center.m-b-20 a:hover {
	background: #2a3040 !important;
	color: var(--v3-primary) !important;
}

/* Footer widget */
html.dark-menus .footer-widget {
	background: var(--v3-sidebar-bg) !important;
	border-top: 1px solid var(--v3-sidebar-border) !important;
	box-shadow: none !important;
}

/* Scrollbar dark */
html.dark-menus .page-sidebar .page-sidebar-wrapper::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.08);
}

html.dark-menus .page-sidebar .page-sidebar-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* Sidebar input fields (shortcut number inputs) */
html.dark-menus .page-sidebar .sidemenu-sc input[type="number"] {
	background: #252a35 !important;
	border-color: #2a3040 !important;
	color: #c8d0da !important;
}

/* Responsive opened state */
html.dark-menus .page-sidebar.opened {
	background: linear-gradient(180deg, #1e2332 0%, #212636 50%, #1a1f2c 100%) !important;
}

/* Dark mode toggle button — active state */
html.dark-menus .dark-menus-toggle i {
	color: var(--v3-warning) !important;
}

/* Header — dark blue gradient */
html.dark-menus .header.navbar,
html.dark-menus .header .navbar-inner {
	background: linear-gradient(90deg, #1e2332 0%, #212636 50%, #1a1f2c 100%) !important;
}

/* Topnav buttons in dark header */
html.dark-menus .topnav .btn-nav {
	color: #c8d0da !important;
}

html.dark-menus .topnav .btn-nav:hover {
	background: #252a35 !important;
	color: #ffffff !important;
}

html.dark-menus .topnav .btn-nav.active {
	background: #252a35 !important;
	color: #ffffff !important;
}

/* Right-side quicklinks icons — lighter in dark mode */
html.dark-menus .header .quicklinks i {
	color: #c8d0da !important;
}

html.dark-menus .header .quicklinks > a:hover i,
html.dark-menus .header .quicklinks > div:not(.simple-chat-popup):hover i {
	color: var(--v3-primary) !important;
}

html.dark-menus .header .quicklinks > a:hover,
html.dark-menus .header .quicklinks > div:not(.simple-chat-popup):hover {
	background: #252a35 !important;
}

/* Logo dark/light mode switching */
.logo.logo-dark { display: none; }
.logo.logo-light { display: inline-block; }
html.dark-menus .logo.logo-dark { display: inline-block; }
html.dark-menus .logo.logo-light { display: none; }


.page-sidebar.mini {
	margin-top: 58px !important;
}