/**
 * ==============================================================================
 * HRVista - Universal Responsive Stylesheet (responsive.css)
 * ==============================================================================
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. UNIVERSAL FLUID FOUNDATIONS & SIDEBAR-CONTENT COORDINATION
   ───────────────────────────────────────────────────────────────────────────── */
:root {
	--sidebar-width: 96px;
	--sidebar-resp-w: 96px;
	--header-height: 64px;
}

body {
	padding-top: var(--header-height, 64px) !important;
}

/* Standalone pages without header (login, forgotPassword, changePassword) */
body:has(.login-page),
body:has(.auth-page),
body:has(.login-container),
body:has(.logoForm),
body.login-page,
body.auth-page,
body:not(:has(header)):not(:has(.fixedheader)) {
	padding-top: 0 !important;
}

.fixedheader {
	height: var(--header-height, 64px) !important;
}

/* Safe media boundary - images and media won't blow out containers */
img:not([width]):not([height]),
svg:not([width]):not([height]),
video,
canvas {
	max-width: 100%;
	height: auto;
}

/* Smooth touch scrolling on all scrollable regions */
.table-responsive,
.premium-table-wrapper,
.dataTables_wrapper,
.premium-scroll-container,
.premium-table-scroll {
	-webkit-overflow-scrolling: touch;
}

/* Ensure flyout root never intercepts touches when menu is closed */
#flyout-root {
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 999999 !important;
}

#flyout-root .hrms-menu {
	pointer-events: auto !important;
}

/* ── UNIVERSAL MODAL VERTICAL CENTERING (PERFECT MIDDLE POSITIONING) ── */
.modal.fade .modal-dialog-centered,
.modal .modal-dialog-centered,
.premium-modal .modal-dialog-centered {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: calc(100vh - 2rem) !important;
	margin: 1rem auto !important;
}

.modal-dialog-centered::before,
.premium-modal .modal-dialog-centered::before {
	display: none !important;
	height: 0 !important;
	content: none !important;
}

.modal.premium-modal,
#incompleteProfileModal.modal,
#dayPresentModal.modal,
#nightPresentModal.modal,
#dayLeaveModal.modal,
#nightLeaveModal.modal,
#totalLeaveModal.modal,
#totalApprovedLeaveModal.modal,
#totalPendingLeaveModal.modal,
#totalRejectedLeaveModal.modal {
	padding-top: 0 !important;
}

/* Compact Width & Responsive Tiers for Profile, Shift & 7-Col Modals */
#incompleteProfileModal .modal-dialog,
#dayPresentModal .modal-dialog,
#nightPresentModal .modal-dialog,
#dayLeaveModal .modal-dialog,
#nightLeaveModal .modal-dialog,
#totalLeaveModal .modal-dialog {
	max-width: 800px !important;
	width: 85% !important;
	margin: 1rem auto !important;
}

@media (min-width : 1200px) {

	#incompleteProfileModal .modal-dialog,
	#dayPresentModal .modal-dialog,
	#nightPresentModal .modal-dialog,
	#dayLeaveModal .modal-dialog,
	#nightLeaveModal .modal-dialog,
	#totalLeaveModal .modal-dialog {
		max-width: 800px !important;
		width: 65% !important;
		margin: 1rem auto !important;
	}
}

@media (min-width : 1400px) {

	#incompleteProfileModal .modal-dialog,
	#dayPresentModal .modal-dialog,
	#nightPresentModal .modal-dialog,
	#dayLeaveModal .modal-dialog,
	#nightLeaveModal .modal-dialog,
	#totalLeaveModal .modal-dialog {
		max-width: 800px !important;
		width: 52% !important;
		margin: 1rem auto !important;
	}
}

@media (min-width : 1600px) {

	#incompleteProfileModal .modal-dialog,
	#dayPresentModal .modal-dialog,
	#nightPresentModal .modal-dialog,
	#dayLeaveModal .modal-dialog,
	#nightLeaveModal .modal-dialog,
	#totalLeaveModal .modal-dialog {
		max-width: 800px !important;
		width: 44% !important;
		margin: 1rem auto !important;
	}
}

/* 8-Column Modal (Total Pending Leave) */
#totalPendingLeaveModal .modal-dialog {
	max-width: 850px !important;
	width: 88% !important;
	margin: 1rem auto !important;
}

@media (min-width : 1200px) {
	#totalPendingLeaveModal .modal-dialog {
		max-width: 850px !important;
		width: 68% !important;
		margin: 1rem auto !important;
	}
}

@media (min-width : 1400px) {
	#totalPendingLeaveModal .modal-dialog {
		max-width: 850px !important;
		width: 55% !important;
		margin: 1rem auto !important;
	}
}

@media (min-width : 1600px) {
	#totalPendingLeaveModal .modal-dialog {
		max-width: 850px !important;
		width: 47% !important;
		margin: 1rem auto !important;
	}
}

/* 9-Column Modals (Total Approved & Total Rejected Leave) */
#totalApprovedLeaveModal .modal-dialog,
#totalRejectedLeaveModal .modal-dialog {
	max-width: 900px !important;
	width: 90% !important;
	margin: 1rem auto !important;
}

@media (min-width : 1200px) {

	#totalApprovedLeaveModal .modal-dialog,
	#totalRejectedLeaveModal .modal-dialog {
		max-width: 900px !important;
		width: 72% !important;
		margin: 1rem auto !important;
	}
}

@media (min-width : 1400px) {

	#totalApprovedLeaveModal .modal-dialog,
	#totalRejectedLeaveModal .modal-dialog {
		max-width: 900px !important;
		width: 58% !important;
		margin: 1rem auto !important;
	}
}

@media (min-width : 1600px) {

	#totalApprovedLeaveModal .modal-dialog,
	#totalRejectedLeaveModal .modal-dialog {
		max-width: 900px !important;
		width: 50% !important;
		margin: 1rem auto !important;
	}
}

/* ── SIDEBAR CONTAINER LOCK (HIGH SPECIFICITY TO BEAT INLINE/DOWNSTREAM RULES) ── */
html body #sideBar,
html body aside#sideBar,
html body aside.sideBar,
html body aside.emp-sideBar {
	position: fixed !important;
	top: calc(var(--header-height, 64px) - 1px) !important;
	bottom: 0 !important;
	left: 0 !important;
	width: var(--sidebar-width, 96px) !important;
	min-width: var(--sidebar-width, 96px) !important;
	max-width: var(--sidebar-width, 96px) !important;
	height: calc(100vh - var(--header-height, 64px) + 1px) !important;
	height: calc(100dvh - var(--header-height, 64px) + 1px) !important;
	max-height: calc(100vh - var(--header-height, 64px) + 1px) !important;
	max-height: calc(100dvh - var(--header-height, 64px) + 1px) !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	box-sizing: border-box !important;
	z-index: 500 !important;
}

/* ── MAIN CONTENT COORDINATION (ZERO OVERLAP ACROSS ALL SCREEN SIZES) ── */
html body .sidebarMainContent,
.sidebarMainContent {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	position: relative !important;
}

/* Content adjacent to sidebar: physical start exactly at sidebar edge */
html body .sidebarMainContent>.content,
html body .sidebarMainContent>#content,
html body .sidebarMainContent #content,
html body .sidebarMainContent .content,
html body div.sidebarMainContent div.content,
html body div.sidebarMainContent div#content,
html body body .sidebarMainContent .content,
html body div.main-content,
html body .main-content,
body:has(#sideBar) #content,
body:has(#sideBar) .content,
body:has(aside.sideBar) #content,
body:has(aside.sideBar) .content,
body.has-sidebar #content,
body.has-sidebar .content {
	margin-left: var(--sidebar-width, 96px) !important;
	left: 0 !important;
	width: calc(100% - var(--sidebar-width, 96px)) !important;
	max-width: calc(100% - var(--sidebar-width, 96px)) !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
	pointer-events: auto !important;
}

/* Standalone pages WITHOUT any sidebar (login, changePassword, forgotPassword, error, etc.) */
body:not(:has(#sideBar)):not(:has(aside.sideBar)) #content,
body:not(:has(#sideBar)):not(:has(aside.sideBar)) .content,
body:not(:has(#sideBar)):not(:has(aside.sideBar)) .main-content,
.login-page #content,
.auth-page #content,
.login-container #content {
	margin-left: 0 !important;
	left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Content inner padding consistency: 10px margins around main content, 52px bottom padding for 12px margin above fixed 40px footer */
html body .dashboardMains,
html body .dashboardMains.py-1,
html body .dashboardMains.py-2,
html body .dashboardMains.py-3,
html body .dashboardMains[class*="py-"],
html body .content .dashboardMains,
html body #content .dashboardMains,
html body .sidebarMainContent .dashboardMains,
div.dashboardMains {
	box-sizing: border-box !important;
	min-width: 0 !important;
	max-width: 100% !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	padding-top: 10px !important;
	padding-bottom: 52px !important;
	margin: 0 !important;
}

html body .table-responsive,
html body .premium-table-wrapper,
html body .premium-scroll-container {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* ── TABLE FOOTER & CARD SPACING ── */
html body .dataTables_wrapper {
	margin-bottom: 0 !important;
	padding-bottom: 6px !important;
}

html body .dataTables_wrapper .dataTables_info,
html body .dataTables_wrapper .dataTables_paginate {
	margin-top: 6px !important;
	margin-bottom: 0 !important;
	padding-top: 4px !important;
	padding-bottom: 6px !important;
}

html body .premium-table-card,
html body .table-card {
	margin-bottom: 0 !important;
}

/* ── UNIVERSAL TABLE SCROLL (STANDARDIZED SIZING & DYNAMIC DATA FIT) ── */
/* Base: For all standard table pages (daily wages employees, attendance log, empList, former employee list, holiday, leaveTypes, attendance monthly report, employee bank details, shift management, schedular log) */
/* When there is data, table expands to occupy available screen down to just above footer (no gap below). */
/* When there is less data (e.g. live tracking) or no data ("No data available in table"), height: auto naturally contracts the table and shows the gap below. */
html body .premium-table-scroll,
html body .dashboardMains .premium-table-scroll,
html body .premium-table-card .premium-table-scroll {
	height: auto !important;
	max-height: calc(100vh - 210px) !important;
	max-height: calc(100dvh - 210px) !important;
	overflow-y: auto !important;
	overflow-x: auto !important;
	position: relative !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* For pages with extra header elements: Date-wise attendance (.premium-legend-card) and Monthly Summary/Register / Form 12 (.month-label-strip) */
html body:has(.premium-legend-card) .premium-table-scroll,
html body .dashboardMains:has(.premium-legend-card) .premium-table-scroll,
html body:has(.month-label-strip) .premium-table-scroll,
html body .dashboardMains:has(.month-label-strip) .premium-table-scroll {
	max-height: calc(100vh - 255px) !important;
	max-height: calc(100dvh - 255px) !important;
}

/* Sleek custom scrollbars for premium-table-scroll */
html body .premium-table-scroll::-webkit-scrollbar {
	width: 6px !important;
	height: 6px !important;
}
html body .premium-table-scroll::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.04) !important;
	border-radius: 8px !important;
}
html body .premium-table-scroll::-webkit-scrollbar-thumb {
	background: rgba(59, 130, 246, 0.35) !important;
	border-radius: 8px !important;
}
html body .premium-table-scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(59, 130, 246, 0.55) !important;
}

/* Prevent hover scale from causing unnecessary horizontal scrollbar */
html body .premium-table tbody tr,
html body .premium-table tbody tr:hover,
html body .premium-table tr:hover,
html body table.premium-table tr:hover,
html body .attendance-summary-table tbody tr:hover,
html body table tbody tr:hover {
	transform: none !important;
}

/* ── BULLETPROOF CIRCULAR PROFILE AVATARS (ALWAYS PERFECT CIRCLES, NEVER OVAL) ── */
html body .premium-avatar,
html body .photo-clickable,
html body .profile-avatar,
html body .employee-avatar-premium,
html body .welcome-avatar,
html body .tm-avatar,
html body .tm-avatar-img,
html body .org-avatar,
html body .oc-detail-avatar,
html body .oc-report-chip-avatar,
html body .emp-profile-avatar-img,
html body .emp-profile-avatar-fallback,
html body .premium-profile-img,
html body .qbitAvtarTop img,
html body .qbitAvtar img,
html body .employee-table img,
html body .user-avatar,
html body img[src*="getProfileImage"],
html body img.photo-clickable {
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
}

/* ── FOOTER ── */
footer,
.footer-sec,
footer .footer-sec,
footer.footer-sec,
.premium-footer {
	position: fixed !important;
	bottom: 0 !important;
	left: var(--sidebar-width, 96px) !important;
	right: 0 !important;
	width: calc(100% - var(--sidebar-width, 96px)) !important;
	max-width: calc(100% - var(--sidebar-width, 96px)) !important;
	height: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 16px !important;
	margin: 0 !important;
	z-index: 400 !important;
	overflow: hidden !important;
}

footer p,
.footer-sec p,
footer .footer-sec p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 40px !important;
	font-size: 11.5px !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

body:not(:has(#sideBar)):not(:has(aside.sideBar)) footer,
body:not(:has(#sideBar)):not(:has(aside.sideBar)) .footer-sec,
body:not(.has-sidebar) footer,
body:not(.has-sidebar) .footer-sec,
.login-page footer,
.auth-page footer,
.login-container footer {
	left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* ── MAIN CONTENT FOOTER CLEARANCE ── */
body {
	padding-bottom: 0 !important;
}

html body .sidebarMainContent > .content,
html body .sidebarMainContent > #content,
html body .sidebarMainContent #content,
html body .sidebarMainContent .content,
html body div.sidebarMainContent div.content,
html body div.sidebarMainContent div#content,
html body body .sidebarMainContent .content,
html body div.main-content,
html body .main-content,
body:has(#sideBar) #content,
body:has(#sideBar) .content,
body:has(aside.sideBar) #content,
body:has(aside.sideBar) .content,
body.has-sidebar #content,
body.has-sidebar .content,
body:not(:has(#sideBar)):not(:has(aside.sideBar)) #content,
body:not(:has(#sideBar)):not(:has(aside.sideBar)) .content,
body:not(:has(#sideBar)):not(:has(aside.sideBar)) .main-content {
	padding-bottom: 0 !important;
}

/* ── CHAT LAUNCHER ── */
.chat-icon,
#chat-icon {
	position: fixed !important;
	bottom: 15px !important;
	right: 20px !important;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999 !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	box-sizing: border-box !important;
}

.chat-icon i,
#chat-icon i {
	font-size: 22px !important;
	line-height: 1 !important;
	color: #fff !important;
}

.chat-box,
#chat-box {
	bottom: 75px !important;
	right: 20px !important;
	z-index: 1000000 !important;
}

/* ── UNIVERSAL MODAL BACKGROUND SCROLL LOCK (PREVENTS BACKGROUND FROM MOVING) ── */
body.modal-open,
html.modal-open,
body:has(.modal.show),
html:has(.modal.show) {
	overflow: hidden !important;
}

body.modal-open #content,
body.modal-open .content,
body.modal-open div.sidebarMainContent div#content,
body.modal-open .sidebarMainContent .content,
body.modal-open .dashboardMains,
body.modal-open .dashboard-page,
body.modal-open #dashboard-Mpage,
body.modal-open .sidebarMainContent,
body.modal-open .main-content,
body.modal-open .premium-content,
body:has(.modal.show) #content,
body:has(.modal.show) .content,
body:has(.modal.show) div.sidebarMainContent div#content,
body:has(.modal.show) .sidebarMainContent .content,
body:has(.modal.show) .dashboardMains,
body:has(.modal.show) .dashboard-page,
body:has(.modal.show) #dashboard-Mpage,
body:has(.modal.show) .sidebarMainContent,
body:has(.modal.show) .main-content,
body:has(.modal.show) .premium-content {
	overflow: hidden !important;
	overflow-y: hidden !important;
}

/* Prevent scroll chaining from modal to background */
.modal,
.modal.show,
.modal-dialog,
.modal-content,
.modal-body,
.glass-modal-body,
.table-glass-wrapper {
	overscroll-behavior: contain !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ULTRA-WIDE & 4K SCREENS (≥ 1600px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width : 1600px) {
	.content-wrapper {
		max-width: 1800px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. TABLETS & MEDIUM DEVICES (≤ 991.98px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width : 991.98px) {
	:root {
		--sidebar-width: 76px;
		--sidebar-resp-w: 76px;
		--header-height: 60px;
	}

	body {
		padding-top: var(--header-height, 60px) !important;
	}

	/* Prevent page-level horizontal overflow */
	html,
	body {
		overflow-x: hidden;
		max-width: 100vw;
	}

	/* Header adjustments on tablets */
	.fixedheader {
		height: var(--header-height, 60px) !important;
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}

	.company-name-header {
		font-size: 15px !important;
		max-width: 200px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Sidebar styling for tablets */
	html body #sideBar,
	html body aside#sideBar,
	html body aside.sideBar,
	html body aside.emp-sideBar {
		top: calc(var(--header-height, 60px) - 1px) !important;
		bottom: 0 !important;
		height: calc(100vh - var(--header-height, 60px) + 1px) !important;
		height: calc(100dvh - var(--header-height, 60px) + 1px) !important;
		max-height: calc(100vh - var(--header-height, 60px) + 1px) !important;
		max-height: calc(100dvh - var(--header-height, 60px) + 1px) !important;
		width: 76px !important;
		min-width: 76px !important;
		max-width: 76px !important;
	}

	/* Top-level sidebar items only — NOT flyout items */
	#sideBar>ul.sideBar-nav>li.asideIcons>a,
	aside.sideBar>ul.sideBar-nav>li.asideIcons>a {
		padding: 8px 4px !important;
		justify-content: center !important;
	}

	/* Content area starts exactly at 76px with zero overlap */
	html body .sidebarMainContent>.content,
	html body .sidebarMainContent>#content,
	html body .sidebarMainContent #content,
	html body .sidebarMainContent .content,
	html body div.sidebarMainContent div.content,
	html body div.sidebarMainContent div#content,
	html body body .sidebarMainContent .content,
	html body div.main-content,
	html body .main-content,
	body:has(#sideBar) #content,
	body:has(#sideBar) .content,
	body:has(aside.sideBar) #content,
	body:has(aside.sideBar) .content {
		margin-left: 76px !important;
		left: 0 !important;
		width: calc(100% - 76px) !important;
		max-width: calc(100% - 76px) !important;
	}

	/* ── FOOTER ── */
	footer,
	.footer-sec,
	footer .footer-sec,
	footer.footer-sec,
	.premium-footer {
		left: 76px !important;
		width: calc(100% - 76px) !important;
		max-width: calc(100% - 76px) !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		z-index: 400 !important;
	}

	/* Content inner padding */
	.dashboardMains {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}

	/* Page headers wrap filters gracefully */
	.premium-page-header,
	.premium-page-header-add {
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	.premium-page-header .header-right,
	.header-right-add,
	.header-right-combined {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		max-width: 100% !important;
	}

	.header-filters-group,
	.header-filters-inline,
	.filter-fields-group {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 6px !important;
		max-width: 100% !important;
	}

	/* Tables: smooth horizontal scroll without expanding page */
	.table-responsive,
	.premium-table-wrapper,
	.dataTables_wrapper {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		box-sizing: border-box !important;
	}

	/* Modals: fit tablet viewport safely */
	.modal-dialog {
		max-width: min(92vw, 680px) !important;
		margin: 1.5rem auto !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. LARGE MOBILE & TABLET PORTRAIT (≤ 767.98px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width : 767.98px) {
	:root {
		--sidebar-width: 64px;
		--sidebar-resp-w: 64px;
		--header-height: 56px;
	}

	body {
		padding-top: var(--header-height, 56px) !important;
	}

	/* Fixed header on mobile */
	.fixedheader {
		height: var(--header-height, 56px) !important;
		padding: 0 8px !important;
	}

	#logoIcon img.logoImage {
		width: 34px !important;
		height: 34px !important;
	}

	/* Sidebar shrinks cleanly for more screen space */
	html body #sideBar,
	html body aside#sideBar,
	html body aside.sideBar,
	html body aside.emp-sideBar {
		top: calc(var(--header-height, 56px) - 1px) !important;
		bottom: 0 !important;
		height: calc(100vh - var(--header-height, 56px) + 1px) !important;
		height: calc(100dvh - var(--header-height, 56px) + 1px) !important;
		max-height: calc(100vh - var(--header-height, 56px) + 1px) !important;
		max-height: calc(100dvh - var(--header-height, 56px) + 1px) !important;
		width: 64px !important;
		min-width: 64px !important;
		max-width: 64px !important;
	}

	html body .sidebarMainContent>.content,
	html body .sidebarMainContent>#content,
	html body .sidebarMainContent #content,
	html body .sidebarMainContent .content,
	html body div.sidebarMainContent div.content,
	html body div.sidebarMainContent div#content,
	html body body .sidebarMainContent .content,
	html body div.main-content,
	html body .main-content,
	body:has(#sideBar) #content,
	body:has(#sideBar) .content,
	body:has(aside.sideBar) #content,
	body:has(aside.sideBar) .content {
		margin-left: 64px !important;
		left: 0 !important;
		width: calc(100% - 64px) !important;
		max-width: calc(100% - 64px) !important;
	}

	/* ── FOOTER ── */
	footer,
	.footer-sec,
	footer .footer-sec,
	footer.footer-sec,
	.premium-footer {
		left: 64px !important;
		width: calc(100% - 64px) !important;
		max-width: calc(100% - 64px) !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		z-index: 400 !important;
	}

	footer p,
	.footer-sec p,
	footer .footer-sec p {
		font-size: 10.5px !important;
		line-height: 40px !important;
	}

	/* ── CHAT LAUNCHER ── */
	.chat-icon,
	#chat-icon {
		bottom: 15px !important;
		right: 16px !important;
		width: 50px !important;
		height: 50px !important;
	}

	.chat-box,
	#chat-box {
		bottom: 75px !important;
		right: 12px !important;
		left: 12px !important;
		width: auto !important;
		max-width: calc(100vw - 24px) !important;
		height: 400px !important;
		max-height: calc(100vh - 85px) !important;
	}

	/* Auth / Login Page on mobile */
	.form-right,
	.logoForm {
		height: auto !important;
		min-height: auto !important;
	}

	.form-right {
		min-height: 100vh !important;
		padding: 1.5rem 1rem !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. SMALL PHONES & COMPACT SCREENS (≤ 575.98px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width : 575.98px) {
	:root {
		--sidebar-width: 56px;
		--sidebar-resp-w: 56px;
		--header-height: 56px;
	}

	body {
		padding-top: var(--header-height, 56px) !important;
	}

	/* Compact sidebar for small mobile */
	html body #sideBar,
	html body aside#sideBar,
	html body aside.sideBar,
	html body aside.emp-sideBar {
		top: calc(var(--header-height, 56px) - 1px) !important;
		bottom: 0 !important;
		height: calc(100vh - var(--header-height, 56px) + 1px) !important;
		height: calc(100dvh - var(--header-height, 56px) + 1px) !important;
		max-height: calc(100vh - var(--header-height, 56px) + 1px) !important;
		max-height: calc(100dvh - var(--header-height, 56px) + 1px) !important;
		width: 56px !important;
		min-width: 56px !important;
		max-width: 56px !important;
	}

	aside.sideBar .asideIcons img,
	#sideBar .asideIcons img {
		width: 20px !important;
		height: 20px !important;
	}

	html body .sidebarMainContent>.content,
	html body .sidebarMainContent>#content,
	html body .sidebarMainContent #content,
	html body .sidebarMainContent .content,
	html body div.sidebarMainContent div.content,
	html body div.sidebarMainContent div#content,
	html body body .sidebarMainContent .content,
	html body div.main-content,
	html body .main-content,
	body:has(#sideBar) #content,
	body:has(#sideBar) .content,
	body:has(aside.sideBar) #content,
	body:has(aside.sideBar) .content {
		margin-left: 56px !important;
		left: 0 !important;
		width: calc(100% - 56px) !important;
		max-width: calc(100% - 56px) !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	/* ── FOOTER ── */
	footer,
	.footer-sec,
	footer .footer-sec,
	footer.footer-sec,
	.premium-footer {
		left: 56px !important;
		width: calc(100% - 56px) !important;
		max-width: calc(100% - 56px) !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		z-index: 400 !important;
	}

	.dashboardMains {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	/* Page title scales down smoothly */
	.premium-title,
	.premium-title-add {
		font-size: 17px !important;
	}

	.premium-subtitle,
	.premium-subtitle-add {
		font-size: 11.5px !important;
	}

	/* Filter items full width when stacked */
	.header-filters-group,
	.header-filters-inline,
	.filter-fields-group {
		width: 100% !important;
	}

	.header-filter-item,
	.header-filter-group {
		width: 100% !important;
		flex: 1 1 100% !important;
	}

	.premium-select-header,
	.premium-select,
	.header-filter-group input.premium-select,
	.header-filter-group .flatpickr-input {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Tabs scroll horizontally without breaking layout */
	.nav-tabs,
	.nav-pills {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: 4px;
		gap: 4px;
	}

	.nav-tabs .nav-link,
	.nav-pills .nav-link {
		white-space: nowrap !important;
		flex-shrink: 0 !important;
		font-size: 12px !important;
		padding: 6px 10px !important;
	}

	/* Modals: fit phone screens safely */
	.modal-dialog {
		margin: 0.5rem auto !important;
		max-width: calc(100vw - 1rem) !important;
	}

	.modal-content {
		border-radius: 12px !important;
		max-height: calc(100vh - 1rem) !important;
	}

	.modal-body {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		max-height: calc(100vh - 120px) !important;
	}

	footer p,
	.footer-sec p,
	footer .footer-sec p {
		font-size: 9.5px !important;
		line-height: 40px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. ULTRA-NARROW SCREENS & FOLDABLES (≤ 360px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width : 360px) {
	:root {
		--sidebar-width: 48px;
		--sidebar-resp-w: 48px;
		--header-height: 56px;
	}

	body {
		padding-top: var(--header-height, 56px) !important;
	}

	html body #sideBar,
	html body aside#sideBar,
	html body aside.sideBar,
	html body aside.emp-sideBar {
		top: calc(var(--header-height, 56px) - 1px) !important;
		bottom: 0 !important;
		height: calc(100vh - var(--header-height, 56px) + 1px) !important;
		height: calc(100dvh - var(--header-height, 56px) + 1px) !important;
		max-height: calc(100vh - var(--header-height, 56px) + 1px) !important;
		max-height: calc(100dvh - var(--header-height, 56px) + 1px) !important;
		width: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
	}

	html body .sidebarMainContent>.content,
	html body .sidebarMainContent>#content,
	html body .sidebarMainContent #content,
	html body .sidebarMainContent .content,
	html body div.sidebarMainContent div.content,
	html body div.sidebarMainContent div#content,
	html body body .sidebarMainContent .content,
	html body div.main-content,
	html body .main-content,
	body:has(#sideBar) #content,
	body:has(#sideBar) .content,
	body:has(aside.sideBar) #content,
	body:has(aside.sideBar) .content {
		margin-left: 48px !important;
		left: 0 !important;
		width: calc(100% - 48px) !important;
		max-width: calc(100% - 48px) !important;
	}

	/* ── FOOTER ── */
	footer,
	.footer-sec,
	footer .footer-sec,
	footer.footer-sec,
	.premium-footer {
		left: 48px !important;
		width: calc(100% - 48px) !important;
		max-width: calc(100% - 48px) !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		z-index: 400 !important;
	}

	.premium-title,
	.premium-title-add {
		font-size: 15px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. UNIVERSAL SIDEBAR OVERFLOW & ZERO-GAP POSITIONING
   ───────────────────────────────────────────────────────────────────────────── */

/* Sidebar: overflow only when needed, flush against header with zero top gap */
html body #sideBar,
html body aside#sideBar,
html body aside.sideBar,
html body aside.emp-sideBar,
html body aside {
	overflow-y: auto !important;
	overflow-x: hidden !important;
	top: calc(var(--header-height, 64px) - 1px) !important;
	bottom: 0 !important;
	height: calc(100vh - var(--header-height, 64px) + 1px) !important;
	height: calc(100dvh - var(--header-height, 64px) + 1px) !important;
	max-height: calc(100vh - var(--header-height, 64px) + 1px) !important;
	max-height: calc(100dvh - var(--header-height, 64px) + 1px) !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
	padding-bottom: 8px !important;
	box-sizing: border-box !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Nav list: zero top gap, clean bottom breathing room without artificial overflow */
html body #sideBar .sideBar-nav,
html body aside.sideBar .sideBar-nav,
html body aside .sideBar-nav,
ul.sideBar-nav {
	margin-top: 0 !important;
	padding-top: 2px !important;
	padding-bottom: 8px !important;
}

/* Eliminate Bootstrap mt-3 or margin-top on the first nav item */
html body #sideBar .sideBar-nav>li:first-child,
html body #sideBar .sideBar-nav>li:first-child>a,
html body #sideBar .sideBar-nav>li:first-child>a.mt-3,
html body aside.sideBar .sideBar-nav>li:first-child,
html body aside.sideBar .sideBar-nav>li:first-child>a,
html body aside.sideBar .sideBar-nav>li:first-child>a.mt-3,
html body aside .sideBar-nav>li:first-child,
html body aside .sideBar-nav>li:first-child>a,
html body aside .sideBar-nav>li:first-child>a.mt-3,
#sideBar .sideBar-nav>li:first-child,
aside.sideBar .sideBar-nav>li:first-child {
	margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLYOUT SUBMENU — REDESIGNED
   Compact pill-row style. Items are 28px tall, 1px apart, with an accent
   left-border slide-in on hover. Panel is narrow and tight.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Panel ── */
.hrms-menu,
#flyout-root .hrms-menu {
	text-align: left !important;
	padding: 4px !important;
	min-width: 148px !important;
	max-width: 230px !important;
	width: max-content !important;
	border-radius: 10px !important;
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.25),
		0 12px 28px -4px rgba(0, 0, 0, 0.30) !important;
	border-width: 1px !important;
}

/* ── Item list: flex column with 1px row gap ── */
.hrms-menu ul,
#flyout-root .hrms-menu ul {
	display: flex !important;
	flex-direction: column !important;
	gap: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	width: 100% !important;
}

/* ── Row wrapper ── */
.hrms-menu .asideIcons,
#flyout-root .hrms-menu .asideIcons {
	display: block !important;
	text-align: left !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

/* ── Individual item link ── */
.hrms-menu .asideIcons a,
#flyout-root .hrms-menu .asideIcons a {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	/* ← always left-aligned */
	text-align: left !important;
	white-space: nowrap !important;
	padding: 0 10px !important;
	min-height: 28px !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	font-family: 'Inter', sans-serif !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
	width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 6px !important;
	border-left: 2px solid transparent !important;
	transition:
		background 0.14s ease,
		color 0.14s ease,
		border-left-color 0.14s ease,
		padding-left 0.14s ease !important;
}

/* ── Hover: accent left-border + slight indent ── */
.hrms-menu .asideIcons a:hover,
#flyout-root .hrms-menu .asideIcons a:hover {
	border-left-color: #3b82f6 !important;
	padding-left: 13px !important;
}

/* ── Chevron arrow gap */
#sideBar .asideIcons>a,
aside.sideBar .asideIcons>a,
aside .asideIcons>a {
	/* 20px = arrow icon width (~10px) + 10px breathing gap */
	padding-right: 20px !important;
}

/* Arrow itself: fixed right offset on all screens */
#sideBar .icon-side,
aside.sideBar .icon-side,
aside .icon-side,
.icon-side {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	/* Prevent the arrow from shrinking the flex layout */
	flex-shrink: 0;
	pointer-events: none;
}

/* ── Sidebar tooltip ── */
#sideBar .asideIcons>a::after,
aside.sideBar .asideIcons>a::after,
aside .asideIcons>a::after {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Hide scrollbar track on Webkit so the narrow sidebar stays clean */
html body #sideBar::-webkit-scrollbar,
html body aside.sideBar::-webkit-scrollbar,
html body aside::-webkit-scrollbar {
	width: 3px;
}

html body #sideBar::-webkit-scrollbar-track,
html body aside.sideBar::-webkit-scrollbar-track,
html body aside::-webkit-scrollbar-track {
	background: transparent;
}

html body #sideBar::-webkit-scrollbar-thumb,
html body aside.sideBar::-webkit-scrollbar-thumb,
html body aside::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. LARGE SCREENS / DESKTOPS (≥ 992px)
   ─────────────────────────────────────────────────────────────────────────────
   On desktop the sidebar stays at 96px (icon-only design).
   All rules below ensure:
   • Sidebar is exactly 96px — no creep from other stylesheets
   • Every icon is centred and not clipped horizontally
   • Content starts exactly at 96px with zero gap or overlap
   • Fixed footer is also correctly offset
   • Submenus / flyouts still appear at the right position
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
	:root {
		--sidebar-width: 96px;
		--sidebar-resp-w: 96px;
		--header-height: 64px;
	}

	body {
		padding-top: var(--header-height, 64px) !important;
	}

	/* ── Sidebar container ── */
	html body #sideBar,
	html body aside#sideBar,
	html body aside.sideBar,
	html body aside.emp-sideBar {
		width: 96px !important;
		min-width: 96px !important;
		max-width: 96px !important;
		top: calc(var(--header-height, 64px) - 1px) !important;
		bottom: 0 !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		height: calc(100vh - var(--header-height, 64px) + 1px) !important;
		height: calc(100dvh - var(--header-height, 64px) + 1px) !important;
		max-height: calc(100vh - var(--header-height, 64px) + 1px) !important;
		max-height: calc(100dvh - var(--header-height, 64px) + 1px) !important;
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	/* ── Nav list: no horizontal overflow ── */
	#sideBar .sideBar-nav,
	aside.sideBar .sideBar-nav,
	ul.sideBar-nav {
		width: 96px !important;
		max-width: 96px !important;
		box-sizing: border-box !important;
		padding: 4px 6px !important;
		margin-top: 0 !important;
	}

	/* ── Each icon row — top-level sidebar only (NOT flyout items) ── */
	#sideBar>ul.sideBar-nav>li.asideIcons>a,
	aside.sideBar>ul.sideBar-nav>li.asideIcons>a {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-direction: column !important;
		min-height: 44px !important;
		padding: 10px 4px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	/* ── Icon itself — top-level sidebar icons only ── */
	#sideBar>ul.sideBar-nav>li.asideIcons>a>i.menu-icon,
	aside.sideBar>ul.sideBar-nav>li.asideIcons>a>i.menu-icon {
		font-size: 20px !important;
		line-height: 1 !important;
	}

	/* ── Arrow chevron stays correctly placed ── */
	#sideBar .icon-side,
	aside.sideBar .icon-side,
	.icon-side {
		position: absolute !important;
		right: 6px !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		font-size: 10px !important;
	}

	/* ── Content: starts at exactly 96px, full available width ── */
	html body .sidebarMainContent>.content,
	html body .sidebarMainContent>#content,
	html body .sidebarMainContent #content,
	html body .sidebarMainContent .content,
	html body div.sidebarMainContent div.content,
	html body div.sidebarMainContent div#content,
	html body body .sidebarMainContent .content,
	html body div.main-content,
	html body .main-content,
	body:has(#sideBar) #content,
	body:has(#sideBar) .content,
	body:has(aside.sideBar) #content,
	body:has(aside.sideBar) .content,
	body.has-sidebar #content,
	body.has-sidebar .content {
		margin-left: 96px !important;
		left: 0 !important;
		width: calc(100% - 96px) !important;
		max-width: calc(100% - 96px) !important;
		box-sizing: border-box !important;
	}

	/* ── FOOTER ── */
	footer,
	.footer-sec,
	footer .footer-sec,
	footer.footer-sec,
	.premium-footer {
		left: 96px !important;
		width: calc(100% - 96px) !important;
		max-width: calc(100% - 96px) !important;
		height: 40px !important;
		min-height: 40px !important;
		max-height: 40px !important;
		z-index: 400 !important;
	}

	/* ── Body/html: no horizontal scroll on large screens ── */
	html,
	body {
		overflow-x: hidden;
		max-width: 100vw;
	}
}

/* ==============================================================================
   CHANGE PASSWORD PAGE - FIXED SCREEN SIZE, ZERO UNNECESSARY SCROLLBARS
   Screen size is firmly locked to 100vh viewport without unnecessary scrollbars.
   ============================================================================== */

/* Strictly lock html and body to 100vh screen with NO outer window scrollbar */
html:has(.page-shell),
body:has(.page-shell) {
	height: 100vh !important;
	height: 100dvh !important;
	max-height: 100vh !important;
	max-height: 100dvh !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Fix page shell strictly to 100vh */
.page-shell {
	height: 100vh !important;
	height: 100dvh !important;
	max-height: 100vh !important;
	max-height: 100dvh !important;
	overflow: hidden !important;
}

/* Illustration section stays cleanly full-height without overflow */
.page-shell .illustration-section {
	height: 100% !important;
	overflow: hidden !important;
}

/* Form section: fixed height, perfectly centered, scrollbar only appears if viewport height < 500px */
.page-shell .form-section {
	height: 100vh !important;
	height: 100dvh !important;
	max-height: 100vh !important;
	max-height: 100dvh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 12px 16px !important;
	box-sizing: border-box !important;
	scrollbar-width: thin;
}

/* Form wrapper: beautifully sized to fit comfortably inside 100vh without scrolling */
.page-shell .form-wrapper,
.form-section .form-wrapper {
	max-height: none !important;
	height: auto !important;
	margin: auto !important; /* flex centering without extending height */
	width: min(100%, 430px) !important;
	padding: 18px 24px !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* Logo & Step icon */
.page-shell .step-icon {
	margin-bottom: 8px !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}

.page-shell .step-icon img {
	height: 32px !important;
	width: auto !important;
	max-width: 100% !important;
}

/* Form header with balanced typography */
.page-shell .form-header {
	margin-bottom: 10px !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}

.page-shell .form-header h2 {
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin-bottom: 4px !important;
	line-height: 1.2 !important;
}

.page-shell .form-header p {
	font-size: 0.78rem !important;
	color: #94a3b8 !important;
	line-height: 1.35 !important;
	margin-bottom: 0 !important;
}

/* Form groups & inputs - comfortable height without bloating card */
.page-shell .form-group {
	margin-bottom: 10px !important;
}

.page-shell .form-label {
	font-size: 0.76rem !important;
	font-weight: 600 !important;
	color: #e2e8f0 !important;
	margin-bottom: 4px !important;
	display: block !important;
}

.page-shell .form-label.mt-3 {
	margin-top: 10px !important;
}

.page-shell .form-input {
	min-height: 38px !important;
	padding: 8px 38px 8px 12px !important;
	font-size: 0.88rem !important;
	border-radius: 10px !important;
}

.page-shell .toggle-password {
	font-size: 1rem !important;
	padding: 3px !important;
}

/* Password requirements - clean, neat, comfortable */
.page-shell .password-requirements {
	margin-top: 8px !important;
	padding: 8px 12px !important;
	border-radius: 10px !important;
}

.page-shell .requirement {
	margin: 3px 0 !important;
	font-size: 0.72rem !important;
	gap: 8px !important;
	line-height: 1.3 !important;
}

.page-shell .requirement-icon {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
}

/* Primary Button */
.page-shell .btn-primary {
	min-height: 40px !important;
	padding: 9px 14px !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	margin-top: 8px !important;
	border-radius: 10px !important;
	flex-shrink: 0 !important;
}

/* Copyright text */
.page-shell .copyright {
	margin-top: 10px !important;
	padding-top: 8px !important;
	font-size: 0.62rem !important;
	color: rgba(255, 255, 255, 0.45) !important;
	flex-shrink: 0 !important;
}