@charset "UTF-8";

:root, [data-bs-theme=light] {
	--bs-font-sans-serif: "Open Sans", Inter, Helvetica, "sans-serif";
	--bs-btn-font-family: var(--bs-font-sans-serif) !important;
	--bs-body-text-align: right;
}

html, body {
	font-family: "Open Sans", Inter, Helvetica, "sans-serif";
}

/* Mobile Menu Styles */
@media (max-width: 991px) {
	/* Mobile toggle button wrapper - fixed position */
	.mobile-menu-toggle-wrapper {
		position: fixed !important;
		top: 20px !important;
		left: 20px !important;
		z-index: 1000 !important;
		animation: fadeInLeft 0.5s ease-out;
		pointer-events: none;
	}
	
	.mobile-menu-toggle-wrapper #kt_aside_toggle {
		pointer-events: all;
	}
	
	@keyframes fadeInLeft {
		from {
			opacity: 0;
			transform: translateX(-20px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	/* Mobile toggle button styling */
	#kt_aside_toggle {
		position: relative;
		width: 48px !important;
		height: 48px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
		box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
		border: none !important;
	}
	
	#kt_aside_toggle:hover {
		transform: scale(1.05);
		box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
	}
	
	#kt_aside_toggle:active {
		transform: scale(0.95);
	}
	
	#kt_aside_toggle i {
		color: #ffffff !important;
		font-size: 1.5rem;
		transition: transform 0.3s ease;
	}
	
	/* When drawer is open, rotate the button icon */
	#kt_aside[data-kt-drawer-shown="true"] ~ * #kt_aside_toggle i,
	body.drawer-on #kt_aside_toggle i {
		transform: rotate(90deg);
	}
	
	/* Make sure button stays visible when drawer is open */
	.drawer-on .mobile-menu-toggle-wrapper {
		z-index: 10001 !important;
	}
	
	/* Modern drawer overlay with blur - lighter for better visibility */
	.drawer-overlay {
		background-color: rgba(0, 0, 0, 0.2) !important;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 9998 !important;
	}

	/* CRITICAL: Disable ALL interactions with content when drawer is open */
	body.drawer-on #kt_wrapper,
	body.drawer-on #kt_content,
	body.drawer-on #kt_content_container,
	body.drawer-on .page,
	body.drawer-on .app-main,
	body.drawer-on .content,
	body.drawer-on .mobile-app-topbar,
	body.drawer-on .mobile-app-subtabs,
	body.drawer-on .mobile-app-bottomnav,
	body.drawer-on .mobile-plus-popup,
	body.drawer-on .mobile-business-dropdown {
		pointer-events: none !important;
		user-select: none !important;
		-webkit-user-select: none !important;
	}

	/* Keep drawer and overlay interactive */
	body.drawer-on #kt_aside,
	body.drawer-on .drawer-overlay,
	body.drawer-on .mobile-menu-toggle-wrapper {
		pointer-events: auto !important;
	}
	
	[data-kt-drawer-name="aside"][data-kt-drawer-overlay="true"]::before {
		background-color: rgba(0, 0, 0, 0.2) !important;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}
	
	/* Prevent horizontal scroll on mobile - hide drawer when closed */
	body,
	html,
	.page,
	#kt_body,
	#kt_wrapper,
	#kt_content,
	#kt_content_container {
		overflow-x: hidden !important;
	}
	
	/* Drawer styling - RTL: comes from RIGHT side */
	#kt_aside {
		background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
		box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		position: fixed !important;
		right: -280px !important;
		left: auto !important;
		top: 0;
		height: 100vh;
		width: 280px;
		transform: none !important;
		transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 9999 !important;
		display: flex !important;
		flex-direction: column !important;
	}
	
	/* Aside menu should fill available space */
	#kt_aside_menu {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	
	/* Show drawer when active - CRITICAL: Must override inline styles */
	#kt_aside.drawer-on,
	#kt_aside[data-kt-drawer-shown="true"] {
		right: 0 !important;
		display: flex !important;
		visibility: visible !important;
	}
	
	/* Overlay for drawer - lighter background */
	#kt_aside.drawer-on::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		z-index: -1;
	}
	
	[data-bs-theme=dark] #kt_aside {
		background: linear-gradient(180deg, #1e1e2d 0%, #27293d 100%);
	}
	
	/* Menu items modern styling */
	#kt_aside .menu-item {
		margin-bottom: 8px;
		transition: all 0.3s ease;
		/* Remove initial hidden state - let items be visible immediately */
		opacity: 1 !important;
		transform: translateX(0) !important;
	}
	
	/* Add subtle dividers between permission groups */
	#kt_aside .menu-item:has(+ .menu-item) {
		position: relative;
	}
	
	/* Special spacing for major section breaks */
	#kt_aside .menu-item:nth-child(5),
	#kt_aside .menu-item:nth-child(9) {
		margin-bottom: 20px;
		padding-bottom: 12px;
		border-bottom: 1px solid rgba(59, 130, 246, 0.08);
	}
	
	#kt_aside .menu-link {
		border-radius: 12px;
		padding: 14px 16px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
	}
	
	#kt_aside .menu-link::before {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		width: 4px;
		height: 100%;
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
		transform: scaleY(0);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	#kt_aside .menu-link:hover {
		background-color: rgba(59, 130, 246, 0.08);
		transform: translateX(-4px);
	}
	
	#kt_aside .menu-link:hover::before {
		transform: scaleY(1);
	}
	
	#kt_aside .menu-link.active {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
	}
	
	#kt_aside .menu-link.active::before {
		transform: scaleY(1);
	}
	
	#kt_aside .menu-title {
		font-weight: 600;
		font-size: 0.95rem;
		color: #181c32;
		transition: color 0.3s ease;
	}
	
	[data-bs-theme=dark] #kt_aside .menu-title {
		color: #f1f1f4;
	}
	
	#kt_aside .menu-link:hover .menu-title {
		color: #3b82f6;
	}
	
	#kt_aside .menu-link.active .menu-title {
		color: #3b82f6;
		font-weight: 700;
	}
	
	#kt_aside .menu-icon {
		transition: transform 0.3s ease;
	}
	
	#kt_aside .menu-link:hover .menu-icon {
		transform: scale(1.1);
	}
	
	/* Logo area styling */
	#kt_aside_logo {
		padding: 20px;
		border-bottom: 1px solid rgba(59, 130, 246, 0.1);
		margin-bottom: 20px;
	}
	
	/* Mobile menu header styling */
	.mobile-menu-header {
		position: relative;
		flex-shrink: 0;
	}
	
	.mobile-menu-header h3 {
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}
	
	[data-bs-theme=dark] .mobile-menu-header h3 {
		color: #f1f1f4 !important;
		-webkit-text-fill-color: #f1f1f4;
	}
	
	/* Menu container should take remaining space */
	#kt_aside .menu {
		flex: 1;
		overflow-y: auto;
	}
	
	.mobile-menu-close {
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.mobile-menu-close:hover {
		background: rgba(59, 130, 246, 0.2) !important;
		transform: rotate(90deg) scale(1.1);
	}
	
	.mobile-menu-close:active {
		transform: rotate(90deg) scale(0.9);
	}
	
	/* Swipe indicator styling */
	.swipe-indicator {
		animation: swipePulse 2s ease-in-out infinite;
		opacity: 0.6;
	}
	
	@keyframes swipePulse {
		0%, 100% {
			opacity: 0.6;
			width: 50px;
		}
		50% {
			opacity: 0.3;
			width: 40px;
		}
	}
	
	[data-bs-theme=dark] .swipe-indicator {
		background: rgba(59, 130, 246, 0.5) !important;
	}
	
	/* Mobile swipe hint styling */
	.mobile-swipe-hint {
		animation: fadeInUp 0.5s ease-out 0.5s both;
	}
	
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 0.6;
			transform: translateY(0);
		}
	}
	
	.mobile-swipe-hint i {
		animation: swipeArrow 2s ease-in-out infinite;
	}
	
	@keyframes swipeArrow {
		0%, 100% {
			transform: translateX(0);
		}
		50% {
			transform: translateX(5px);
		}
	}
	
	/* Footer area styling */
	#kt_aside_footer {
		border-top: 1px solid rgba(59, 130, 246, 0.1);
		padding: 16px;
		background: rgba(59, 130, 246, 0.03);
	}
	
	/* Smooth scroll for menu */
	#kt_aside_menu_wrapper {
		scrollbar-width: thin;
		scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
		flex: 1;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}
	
	#kt_aside_menu_wrapper::-webkit-scrollbar {
		width: 6px;
	}
	
	#kt_aside_menu_wrapper::-webkit-scrollbar-track {
		background: transparent;
	}
	
	#kt_aside_menu_wrapper::-webkit-scrollbar-thumb {
		background: rgba(59, 130, 246, 0.3);
		border-radius: 10px;
	}
	
	#kt_aside_menu_wrapper::-webkit-scrollbar-thumb:hover {
		background: rgba(59, 130, 246, 0.5);
	}
	
	/* Animation for drawer open/close */
	#kt_aside[data-kt-drawer-shown="true"] {
		animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	@keyframes slideInRight {
		from {
			transform: translateX(100%);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}
	
	/* User profile in footer - mobile enhancements */
	#kt_aside_footer .symbol {
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
		border: 2px solid rgba(59, 130, 246, 0.2);
	}
	
	/* Modern ripple effect on menu items */
	#kt_aside .menu-link {
		position: relative;
		overflow: hidden;
	}
	
	#kt_aside .menu-link::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(59, 130, 246, 0.3);
		transform: translate(-50%, -50%);
		transition: width 0.6s, height 0.6s;
	}
	
	#kt_aside .menu-link:active::after {
		width: 300px;
		height: 300px;
	}
	
	/* Pulse animation for initial attention */
	@keyframes pulse {
		0% {
			box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
			transform: scale(1);
		}
		50% {
			box-shadow: 0 6px 25px rgba(59, 130, 246, 0.7);
			transform: scale(1.05);
		}
		100% {
			box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
			transform: scale(1);
		}
	}
	
	.mobile-menu-toggle.pulse-animation {
		animation: pulse 1s ease-in-out 3;
	}
	
	/* Entrance animation for drawer */
	#kt_aside.drawer-open {
		animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	/* Logo animation when drawer opens */
	#kt_aside.drawer-open #kt_aside_logo img {
		animation: fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	@keyframes fadeInScale {
		from {
			opacity: 0;
			transform: scale(0.8);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	/* Footer profile animation when drawer opens */
	#kt_aside.drawer-open #kt_aside_footer {
		animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
	}
	
	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	/* Better header spacing on mobile */
	#kt_header_container {
		padding: 10px 15px !important;
	}
	
	/* Better touch targets for mobile */
	#kt_aside .menu-link {
		min-height: 48px;
		display: flex;
		align-items: center;
	}
	
	/* Logo in mobile header */
	.d-flex.d-lg-none img {
		height: 24px !important;
		margin-right: 12px;
	}
	
	/* Backdrop blur enhancement */
	#kt_aside[data-kt-drawer-overlay="true"]::before {
		transition: backdrop-filter 0.3s ease;
	}
	
	/* Better visibility for active state */
	#kt_aside .menu-link.active .menu-icon i {
		color: #3b82f6 !important;
	}
	
	/* Smooth color transitions */
	#kt_aside .menu-icon i,
	#kt_aside .menu-icon .path1,
	#kt_aside .menu-icon .path2 {
		transition: color 0.3s ease;
	}

	/* Mobile User Account Section */
	.mobile-user-section {
		background: rgba(59, 130, 246, 0.03);
		margin: 15px -5px 0 -3px;
		padding: 15px 10px;
		border-radius: 12px;
	}

	.mobile-user-section .symbol {
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
		border: 2px solid rgba(59, 130, 246, 0.2);
	}

	.mobile-settings-toggle {
		transition: all 0.3s ease;
	}

	.mobile-settings-toggle:hover {
		background: rgba(59, 130, 246, 0.15) !important;
	}

	.mobile-settings-toggle[aria-expanded="true"] {
		background: rgba(59, 130, 246, 0.2) !important;
	}

	.mobile-settings-toggle[aria-expanded="true"] i {
		transform: rotate(90deg);
	}

	.mobile-settings-toggle i {
		transition: transform 0.3s ease;
	}

	#mobileSettingsCollapse {
		margin-top: 10px;
	}

	.mobile-settings-links {
		background: rgba(59, 130, 246, 0.03);
		border-radius: 10px;
		padding: 8px;
	}

	.mobile-settings-links a {
		transition: background 0.2s ease;
	}

	.mobile-settings-links a:hover {
		background: rgba(59, 130, 246, 0.08) !important;
	}

	.mobile-user-section a[href*="logout"]:hover {
		background: rgba(231, 76, 60, 0.08) !important;
	}
}

/* Tablet adjustments (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	/* Slightly larger drawer on tablets */
	#kt_aside[data-kt-drawer="true"] {
		width: 280px !important;
	}
	
	#kt_aside .menu-link {
		padding: 16px 20px;
		font-size: 1rem;
	}
}

/* Small mobile (up to 576px) */
@media (max-width: 576px) {
	/* Ensure drawer doesn't take full width on small screens */
	#kt_aside[data-kt-drawer="true"] {
		max-width: 85vw;
	}
	
	#kt_aside .menu-title {
		font-size: 0.9rem;
	}
	
	#kt_header_container {
		padding: 8px 10px !important;
	}
}

/* Ensure desktop view stays the same */
@media (min-width: 992px) {
	#kt_aside {
		/* Desktop styles remain unchanged */
	}
	
	/* Hide mobile-specific elements on desktop */
	.mobile-menu-toggle {
		display: none !important;
	}
}

#kt_wrapper {
	padding-top: 0 !important;
}

#plus-button-wrapper {
	position: sticky;
	top: 105px;
	left: 0;
	flex-direction: column;
	align-items: center;
	margin-left: 15px;
	margin-right: auto;
	z-index: 110;
	gap: 6px;
}

.plus-button-label {
	font-size: 11px;
	font-weight: 600;
	color: #7e8299;
	white-space: nowrap;
	text-align: center;
	letter-spacing: -0.2px;
}

#plus-button-wrapper #plus-button {
	position: relative;
	top: auto;
	margin-left: 0;
	margin-right: 0;
}

#plus-button {
	position: sticky;
	display: flex;
	top: 105px;
	left: 0;
	width: 45px;
	height: 45px;
	margin-left: 15px;
	margin-right: auto;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 110;
}

#plus-button i {
	display: block;
	width: auto;
	height: auto;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
	font-size: 24px;
	line-height: 1;
	transform: none !important;
}

/* RTL fix: move select2 clear button to the left side */
.select2-container--bootstrap5 .select2-selection__clear {
	right: auto;
	left: 3rem;
}

/*general*/
.cursor-pointer {
	cursor: pointer;
}

.income-title-margin {
	margin: 0 50px 25px !important;
}

.btn-submit .indicator-progress {
	display: none;
}

.btn-submit:disabled .indicator-progress, .btn-submit[disabled] .indicator-progress {
	display: inline-block;
}

.btn-submit:disabled .text, .btn-submit[disabled] .text {
	display: none;
}

.btn-export-csv {
	transform: translateY(-6px);
	border: 1px solid #022561 !important;
	color: #022561 !important;
	font-size: 0.875rem !important;
	border-radius: 50rem !important;
	align-items: center !important;
	padding: 0.25rem 1rem 0.25rem 1rem !important;
	transition: all 0.2s ease;
}

.btn-generate-report {
	border: 1px solid #022561 !important;
	color: #022561 !important;
	font-size: 0.875rem !important;
	border-radius: 50rem !important;
	align-items: center !important;
	padding: 0.25rem 1rem 0.25rem 1rem !important;
	transition: all 0.2s ease;
}

.btn-generate-report:hover {
	background-color: #cad5e8 !important;
	/*color: #FFFFFF !important;*/
}

.ps-25 {
	padding-inline-start: 6.5rem !important;
}

.bg-dark-blue {
	background-color: #022561;
}

.file-input-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.file-upload-label {
	width: 160px;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;

	border: 2px dashed #28428f;
	border-radius: 0.75rem;
	background-color: #f9fff9;
	transition: border-color 0.3s ease, background-color 0.3s ease;

	box-shadow: 0 4px 12px rgba(40, 66, 143, 0.2);
	color: #b0c4f1;
}

.file-upload-label:hover {
	border-color: #3c5de5;
	background-color: #e2e9fc;
}

.file-upload-label.drag-over {
	border-color: #1a3dd9;
	background-color: #dde7ff;
}

.file-upload-label small.upload-hover {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	text-align: center;

	opacity: 0;
	transition: opacity 0.3s ease;
	font-size: 0.9rem;
	color: #28428f;
	font-weight: 500;
	pointer-events: none;
}

.file-upload-label:hover small.upload-hover {
	opacity: 1;
}

.pdf-preview {
	width: 200px;
	height: 200px;
	cursor: pointer;
}

.table th {
	background-color: #f8f9fa !important;
	font-weight: 600;
	white-space: nowrap;
}

/* hide dt search */
.dataTables_filter {
	display: none;
}

.modal-header.bg-primary {
	border-bottom: none;
}

.tooltip-dark {
	background-color: transparent !important;
	box-shadow: none !important;
}

.tooltip-dark .tooltip-inner {
	background-color: #000 !important;
	color: #fff !important;
	font-size: 0.85rem;
	padding: 4px 6px;
	border-radius: 4px;
	text-align: center;
	max-width: 200px;
}

/* black arrow tooltip */
.tooltip-dark .tooltip-arrow::before {
	border-top-color: #000 !important;
}

.text-decoration-underline:hover {
	color: #28a745;
}

.table-default thead {
	position: sticky;
	top: -40px;
	z-index: 10;
	background-color: transparent !important;
	box-shadow: none;
	border-bottom: none;
}

.table-default thead th {
	background-color: transparent !important;
	color: #7e8299;
	font-weight: 600;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.table-default thead tr.filters th {
	padding: 0;
}

table.table.dataTable > tbody > tr {
	border: none;
	background-color: white;
}

.table-default tbody tr.group {
	background-color: #e2e8f0;
	font-weight: bold;
	font-size: 1.5rem;
	padding: 12px 16px;
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	margin-top: 20px;
}

.table-default tbody tr.group td {
	border-radius: 10px;
	padding: 12px 16px;
}

.table-default tbody tr {
	transition: all 0.15s ease;

}

.table-default tbody tr:hover {
	background-color: #f1f5f9;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: scale(1.000);
	cursor: pointer;
}

.table:not(.table-bordered) tr:first-child, .table:not(.table-bordered) th:first-child, .table:not(.table-bordered) td:first-child {
	padding-right: 10px;
}

.table:not(.table-bordered) tr:last-child, .table:not(.table-bordered) th:last-child, .table:not(.table-bordered) td:last-child {
	padding-left: 10px;
}

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 100px;
	font-size: 1rem;
}

/* separate months */
.empty-spacer-row {
	height: 25px !important;
	cursor: default !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

.month-header-row {
	border-bottom: 1px solid #dee2e6 !important;
	cursor: default !important;
	border-top: none !important;

}

.month-header-cell {
	padding: 12px 15px !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;

}

.month-title-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.month-title-text {
	font-weight: 700;
	font-family: "Calibri Light";
	color: #495057;
	text-align: right;
}

.btn-row-group {
	opacity: 0;
	transition: opacity 0.2s ease;
}

tr:hover .btn-row-group {
	opacity: 1;
}

.close-btn {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: white;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}

.close-btn:hover {
	background: rgba(255, 255, 255, 0.3);
}

.close-window-btn {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
	padding: 2px;
}

.close-window-btn:hover {
	background: #e9ecef;
	color: #000;
}

/* DataTables */
.dt-container > .row:first-child > div:first-child label {
	display: none;
}

.dt-default table {
	border-spacing: 2px;
	border-collapse: separate;
}

.dt-default table tr th, .dt-default table tr td {
	padding: 1px;
}

.dt-default table tr th, .dt-default table tr td {
	text-align: right;
}

/* ========================================
   END OF DESKTOP STYLES
   Mobile styles are in @media queries
   ======================================== */

/* Desktop - Ensure card-title stays in row */
@media (min-width: 769px) {
	.card-title {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
	}

	.card-title .d-grid {
		flex: 1 !important;
	}
}

/* Mobile devices - Fix expenses page container width */
@media (max-width: 768px) {
	#kt_content_container {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Page header buttons responsive */
	.d-flex.align-items-center.mb-4.fs-1.fw-bold.justify-content-between {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 1rem !important;
		margin: 0 20px !important;
	}

	.d-flex.align-items-center.mb-4.fs-1.fw-bold.justify-content-between > div {
		width: 100% !important;
	}

	/* Report buttons */
	#generateIncomesReport,
	#backupDownloadDocs,
	#uploadFromWhatsapp {
		width: 100% !important;
		margin-bottom: 0.5rem !important;
	}

	/* Card header responsive */
	.card-header {
		padding: 0.75rem !important;
	}

	/* Card title - keep search and filters in same area but stack them vertically */
	.card-title {
		flex-wrap: wrap !important;
		gap: 0.75rem !important;
	}

	/* Search input container on mobile */
	.card-title > .d-flex.align-items-center.position-relative.my-1 {
		flex: 1 1 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.card-title .input-group {
		width: 100% !important;
		max-width: 100% !important;
	}

	#searchInput {
		font-size: 0.85rem !important;
	}

	/* Fix filters grid - responsive columns without horizontal scroll */
	.card-title .d-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.5rem !important;
		margin: 0 !important;
		width: 100% !important;
	}

	/* Filter containers take full width */
	.date-filter-container,
	.doc-type-filter-container,
	.expense-type-filter-container,
	.status-filter-container,
	.payment-method-filter-container,
	.amount-filter-container {
		width: 100% !important;
	}

	/* Filter dropdowns full width */
	.date-filter-container .dropdown,
	.doc-type-filter-container .dropdown,
	.expense-type-filter-container .dropdown,
	.status-filter-container .dropdown,
	.payment-method-filter-container .dropdown,
	.amount-filter-container .dropdown {
		width: 100% !important;
	}

	.date-filter-container .btn,
	.doc-type-filter-container .btn,
	.expense-type-filter-container .btn,
	.status-filter-container .btn,
	.payment-method-filter-container .btn,
	.amount-filter-container .btn {
		width: 100% !important;
		font-size: 0.8rem !important;
		padding: 0.5rem !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		justify-content: space-between !important;
		display: flex !important;
		align-items: center !important;
	}

	/* Dropdown menus responsive */
	.date-filter-container .dropdown-menu,
	.doc-type-filter-container .dropdown-menu,
	.expense-type-filter-container .dropdown-menu,
	.status-filter-container .dropdown-menu,
	.payment-method-filter-container .dropdown-menu,
	.amount-filter-container .dropdown-menu {
		max-width: 95vw !important;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
	}

	/* Dropdown menu items smaller */
	.dropdown-menu .list-group-item {
		padding: 0.5rem 0.75rem !important;
		font-size: 0.85rem !important;
	}

	/* Expansion button */
	#filtersExpansion {
		grid-column: span 2 !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}

	/* Export buttons container */
	#exportButtons {
		width: 100% !important;
		margin-top: 0.5rem !important;
	}

	#exportButtons .dt-buttons {
		width: 100% !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.25rem !important;
	}

	#exportButtons .dt-buttons .btn {
		flex: 1 1 auto !important;
		min-width: calc(50% - 0.25rem) !important;
		font-size: 0.75rem !important;
		padding: 0.4rem 0.5rem !important;
	}

	/* Header sections margins */
	.d-flex.justify-content-end.mt-10.pb-2,
	.d-flex.justify-content-between.align-items-lg-start.mt-10.pb-2 {
		margin: 0 10px !important;
		flex-direction: column !important;
		gap: 0.5rem !important;
	}

	/* Main wrapper padding */
	#kt_wrapper {
		padding: 0 10px !important;
	}

	/* Container margins */
	.container, .container-xxl {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Card margins */
	.card {
		margin: 0 !important;
	}

	/* Hide empty preview boxes on mobile (3 placeholder boxes) */
	[x-data*="multiFilePreview"] .position-relative.rounded.overflow-hidden.border:has(.preview-placeholder) {
		display: none !important;
	}

	/* Show preview boxes only when they have actual files */
	[x-data*="multiFilePreview"] .position-relative.rounded.overflow-hidden.border:has(img),
	[x-data*="multiFilePreview"] .position-relative.rounded.overflow-hidden.border:has(.spinner-border) {
		display: block !important;
	}

	/* File upload section - adjust for mobile */
	.file-container {
		width: 100% !important;
		justify-content: center !important;
	}

	.file-upload-label {
		width: 140px !important;
		height: 160px !important;
	}

	.file-upload-label svg {
		width: 48px !important;
		height: 48px !important;
	}

	/* Entire file preview/upload section takes full width */
	[x-data*="multiFilePreview"] {
		width: 100% !important;
	}

	/* File preview items responsive sizing */
	[x-data*="multiFilePreview"] .position-relative.rounded.overflow-hidden.border {
		width: 140px !important;
		height: 160px !important;
		margin: 0 !important;
	}

	/* File container spacing */
	.file-container {
		margin: 0 !important;
	}

	/* Description section on mobile */
	.mb-3.mt-6.d-flex.justify-content-between.align-items-center {
		margin: 0 10px !important;
		flex-direction: column !important;
	}

	.mb-3.mt-6.d-flex.justify-content-between.align-items-center .d-flex.mb-4.fs-6.align-items-center.w-100 {
		flex-direction: column !important;
		align-items: center !important;
	}


	/* Before upload text - show at top when no files (order 0) */
	[x-data*="multiFilePreview"] .text-start > div:first-child {
		flex: 0 0 100% !important;
		order: 0 !important;
		margin-bottom: 0.75rem !important;
		text-align: center !important;
	}

	/* After upload text - below all previews when files exist (order 5) */
	[x-data*="multiFilePreview"] .text-start > div:last-child {
		flex: 0 0 100% !important;
		order: 5 !important;
		margin-top: 1rem !important;
		width: 100% !important;
		text-align: center !important;
	}

	/* Center the button inside */
	[x-data*="multiFilePreview"] .text-start > div:last-child button {
		margin: 0.5rem auto 0 !important;
		display: block !important;
	}

	/* Smaller font for mobile */
	[x-data*="multiFilePreview"] .text-start .fw-bold {
		font-size: 1rem !important;
	}

	[x-data*="multiFilePreview"] .text-start .fs-7 {
		font-size: 0.85rem !important;
	}

	/* Keep file-upload and preview wrapping to next line */
	[x-data*="multiFilePreview"] {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
	}

	/* Description section - use contents to allow children to flex independently */
	[x-data*="multiFilePreview"] > .text-start {
		display: contents !important;
	}

	/* File container (upload button) - order 1, keep in line with previews */
	.file-container {
		flex: 0 0 auto !important;
		order: 1 !important;
	}

	/* Preview items stay in same row - order 1 */
	[x-data*="multiFilePreview"] > .position-relative.rounded.overflow-hidden.border {
		flex: 0 0 auto !important;
		order: 1 !important;
	}

	/* Expand button takes full width */
	[x-data*="multiFilePreview"] > div[x-show*="files.length"] {
		flex: 0 0 100% !important;
		order: 4 !important;
		margin-top: 0.5rem !important;
	}

	/* Hidden file input */
	[x-data*="multiFilePreview"] > input[type="file"] {
		order: 10 !important;
	}
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
	table.dataTable, .table {
		min-width: 500px;
		font-size: 0.8rem !important;
	}

	.table th, .table td {
		padding: 0.4rem 0.3rem !important;
		font-size: 0.75rem !important;
	}

	.truncate, .truncate-expense-type, .truncate-income-type {
		max-width: 60px !important;
		font-size: 0.75rem !important;
	}

	.btn {
		padding: 0.4rem 0.6rem;
		font-size: 0.8rem;
	}

	.card-body {
		padding: 0.75rem !important;
	}

	.modal-dialog {
		margin: 0.25rem;
	}

	.charts-popup-default, .charts-popup {
		max-height: 60vh !important;
	}

	/* Stack buttons vertically on very small screens */
	.btn-group-vertical-mobile {
		flex-direction: column;
		width: 100%;
	}

	.btn-group-vertical-mobile .btn {
		width: 100%;
		margin-bottom: 0.25rem;
	}

	/* Single column filters for very small screens */
	.card-title .d-grid {
		grid-template-columns: 1fr !important;
		gap: 0.4rem !important;
	}

	/* Smaller filter buttons */
	.date-filter-container .btn,
	.doc-type-filter-container .btn,
	.expense-type-filter-container .btn,
	.status-filter-container .btn,
	.payment-method-filter-container .btn,
	.amount-filter-container .btn {
		font-size: 0.75rem !important;
		padding: 0.4rem !important;
	}

	/* Expansion button single column */
	#filtersExpansion {
		grid-column: span 1 !important;
	}

	/* Page title smaller */
	.page-title {
		font-size: 1.5rem !important;
	}

	/* Card footer responsive */
	.card-footer .row {
		flex-direction: column !important;
		gap: 0.5rem !important;
	}

	.card-footer .col-md-2 {
		width: 100% !important;
		padding: 0.5rem 0 !important;
	}

	/* Export buttons even smaller */
	#exportButtons .dt-buttons .btn {
		font-size: 0.7rem !important;
		padding: 0.3rem 0.4rem !important;
		min-width: calc(33.33% - 0.25rem) !important;
	}

	/* File upload even smaller on very small screens */
	.file-upload-label {
		width: 110px !important;
		height: 130px !important;
	}

	[x-data*="multiFilePreview"] .position-relative.rounded.overflow-hidden.border {
		width: 110px !important;
		height: 130px !important;
	}

	.file-upload-label svg {
		width: 36px !important;
		height: 36px !important;
	}

	.upload-hover {
		font-size: 0.65rem !important;
		bottom: 15px !important;
	}

	/* Smaller gap on very small screens */
	[x-data*="multiFilePreview"] {
		gap: 0.35rem !important;
	}

	/* Adjust text size */
	[x-data*="multiFilePreview"] .text-start .fw-bold {
		font-size: 0.9rem !important;
	}

	[x-data*="multiFilePreview"] .text-start .fs-7 {
		font-size: 0.7rem !important;
	}

	/* Smaller button */
	[x-data*="multiFilePreview"] .text-start button {
		font-size: 0.75rem !important;
		padding: 0.3rem 0.6rem !important;
	}
}

/* ========================================
   Desktop Sidebar Hover Submenu Styles
   ======================================== */
@media (min-width: 992px) {
	/* Submenu opens as floating panel on hover - use fixed position to escape overflow */
	#kt_aside .menu-accordion.hover > .menu-sub {
		position: fixed;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(59, 130, 246, 0.1);
		padding: 12px 8px;
		min-width: 220px;
		animation: submenuSlideIn 0.2s ease-out;
		z-index: 9999;
	}

	@keyframes submenuSlideIn {
		from {
			opacity: 0;
			transform: translateX(10px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* Arrow pointer */
	#kt_aside .menu-accordion.hover > .menu-sub::before {
		content: '';
		position: absolute;
		top: 16px;
		right: -6px;
		width: 12px;
		height: 12px;
		background: #ffffff;
		border: 1px solid rgba(59, 130, 246, 0.1);
		border-left: none;
		border-bottom: none;
		transform: rotate(45deg);
	}

	/* Parent link hover state */
	#kt_aside .menu-accordion.hover > .menu-link {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
	}

	#kt_aside .menu-accordion.hover > .menu-link .menu-title {
		color: #3b82f6;
	}

	/* Rotate arrow on hover */
	#kt_aside .menu-accordion.hover > .menu-link .menu-arrow {
		transform: rotate(-90deg);
	}

	#kt_aside .menu-accordion > .menu-link .menu-arrow {
		transition: transform 0.2s ease;
	}

	/* Submenu items styling */
	#kt_aside .menu-accordion.hover .menu-sub .menu-item {
		margin-bottom: 4px;
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-item:last-child {
		margin-bottom: 0;
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-link {
		border-radius: 8px;
		padding: 10px 14px;
		transition: all 0.2s ease;
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-link:hover {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
		transform: translateX(-4px);
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-link:hover .menu-title {
		color: #3b82f6;
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-link:hover .bullet-dot {
		background-color: #3b82f6 !important;
		transform: scale(1.3);
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-link.active {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-link.active .menu-title {
		color: #3b82f6;
		font-weight: 600;
	}

	#kt_aside .menu-accordion.hover .menu-sub .menu-link.active .bullet-dot {
		background-color: #3b82f6 !important;
	}

	/* Bullet styling */
	#kt_aside .menu-accordion.hover .menu-sub .bullet-dot {
		transition: all 0.2s ease;
	}

	/* Dark mode support */
	[data-bs-theme=dark] #kt_aside .menu-accordion.hover > .menu-sub {
		background: #1e1e2d;
		border-color: rgba(99, 102, 241, 0.2);
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	}

	[data-bs-theme=dark] #kt_aside .menu-accordion.hover > .menu-sub::before {
		background: #1e1e2d;
		border-color: rgba(99, 102, 241, 0.2);
	}

	[data-bs-theme=dark] #kt_aside .menu-accordion.hover .menu-sub .menu-link:hover {
		background: rgba(99, 102, 241, 0.15);
	}

	[data-bs-theme=dark] #kt_aside .menu-accordion.hover .menu-sub .menu-link:hover .menu-title {
		color: #818cf8;
	}

	[data-bs-theme=dark] #kt_aside .menu-accordion.hover .menu-sub .menu-link:hover .bullet-dot {
		background-color: #818cf8 !important;
	}
}

/* Currency symbol - slightly smaller than amount text */
.currency-symbol {
	font-size: 0.85em;
}

/* ========================================
   Mobile App Shell Navigation
   ======================================== */
@media (max-width: 991px) {
	/* Hide the old mobile toggle button when app shell is active */
	.mobile-menu-toggle-wrapper {
		display: none !important;
	}

	/* Body padding for sticky bars */
	body.mobile-app-shell-active {
		padding-top: 100px !important;
		padding-bottom: 64px !important;
	}

	/* Employee-only: no bottom nav, no subtabs */
	body.mobile-app-shell-active.mobile-employee-only {
		padding-bottom: 0 !important;
		padding-top: 56px !important;
	}

	/* === Top Bar === */
	.mobile-app-topbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 56px;
		background: #ffffff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		z-index: 1050;
		display: flex;
		align-items: center;
	}

	[data-bs-theme=dark] .mobile-app-topbar {
		background: #1e1e2d;
		border-bottom-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	.mobile-app-topbar-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 12px;
		direction: rtl;
	}

	.mobile-topbar-btn {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background: transparent;
		border-radius: 10px;
		color: #5e6278;
		transition: all 0.2s ease;
		flex-shrink: 0;
	}

	.mobile-topbar-btn:active {
		background: rgba(59, 130, 246, 0.1);
		color: #3b82f6;
	}

	[data-bs-theme=dark] .mobile-topbar-btn {
		color: #b5b5c3;
	}

	[data-bs-theme=dark] .mobile-topbar-btn:active {
		background: rgba(99, 102, 241, 0.15);
		color: #818cf8;
	}

	.mobile-topbar-title {
		flex: 1;
		text-align: center;
		font-weight: 700;
		font-size: 1rem;
		color: #181c32;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 8px;
	}

	[data-bs-theme=dark] .mobile-topbar-title {
		color: #f1f1f4;
	}

	/* Business dropdown wrapper */
	.mobile-topbar-business-wrapper {
		position: relative;
		flex-shrink: 0;
	}

	.mobile-business-dropdown {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		min-width: 200px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
		border: 1px solid rgba(0, 0, 0, 0.06);
		padding: 8px;
		z-index: 1060;
		animation: mobileDropdownIn 0.15s ease-out;
	}

	[data-bs-theme=dark] .mobile-business-dropdown {
		background: #1e1e2d;
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	}

	.mobile-business-dropdown.show {
		display: block;
	}

	@keyframes mobileDropdownIn {
		from { opacity: 0; transform: translateY(-4px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.mobile-business-dropdown-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 8px;
		color: #181c32;
		text-decoration: none;
		font-size: 0.9rem;
		font-weight: 500;
		transition: background 0.15s ease;
		direction: rtl;
	}

	.mobile-business-dropdown-item:hover,
	.mobile-business-dropdown-item:active {
		background: rgba(59, 130, 246, 0.08);
		color: #3b82f6;
		text-decoration: none;
	}

	.mobile-business-dropdown-item.text-danger {
		color: #e74c3c;
	}

	.mobile-business-dropdown-item.text-danger:hover {
		background: rgba(231, 76, 60, 0.08);
		color: #e74c3c;
	}

	[data-bs-theme=dark] .mobile-business-dropdown-item {
		color: #f1f1f4;
	}

	[data-bs-theme=dark] .mobile-business-dropdown-item:hover {
		background: rgba(99, 102, 241, 0.15);
		color: #818cf8;
	}

	.mobile-business-dropdown-divider {
		height: 1px;
		background: rgba(0, 0, 0, 0.08);
		margin: 4px 0;
	}

	[data-bs-theme=dark] .mobile-business-dropdown-divider {
		background: rgba(255, 255, 255, 0.08);
	}

	/* === Sub-tabs Bar === */
	.mobile-app-subtabs {
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		height: 44px;
		background: #ffffff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		z-index: 1049;
		overflow: hidden;
	}

	[data-bs-theme=dark] .mobile-app-subtabs {
		background: #1e1e2d;
		border-bottom-color: rgba(255, 255, 255, 0.06);
	}

	.mobile-app-subtabs.hidden {
		display: none !important;
	}

	/* When subtabs hidden, adjust body padding */
	body.mobile-app-shell-active.subtabs-hidden {
		padding-top: 56px !important;
	}

	.mobile-subtabs-inner {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.mobile-subtabs-group {
		display: none;
		height: 100%;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		padding: 0 12px;
		gap: 4px;
		width: 100%;
		/* Hide scrollbar */
		-ms-overflow-style: none;
		scrollbar-width: none;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	.mobile-subtabs-group::-webkit-scrollbar {
		display: none;
	}

	.mobile-subtabs-group.active {
		display: flex;
	}

	.mobile-subtab-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 34px;
		padding: 0 14px;
		border-radius: 17px;
		font-size: 0.82rem;
		font-weight: 500;
		color: #7e8299;
		background: transparent;
		text-decoration: none;
		flex-shrink: 0;
		transition: transform 0.2s ease;
		scroll-snap-align: start;
		border: 1px solid transparent;
	}

	.mobile-subtab-item:hover {
		color: #3b82f6;
		text-decoration: none;
	}

	.mobile-subtab-item.active {
		background: #3b82f6;
		color: #ffffff;
		font-weight: 600;
		border-color: #3b82f6;
	}

	[data-bs-theme=dark] .mobile-subtab-item {
		color: #b5b5c3;
	}

	[data-bs-theme=dark] .mobile-subtab-item.active {
		background: #6366f1;
		border-color: #6366f1;
		color: #ffffff;
	}

	.mobile-subtab-item.disabled {
		color: #c4c4d4;
		cursor: default;
		pointer-events: none;
	}

	[data-bs-theme=dark] .mobile-subtab-item.disabled {
		color: #565674;
	}

	/* === Bottom Navigation === */
	.mobile-app-bottomnav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 64px;
		background: #ffffff;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
		z-index: 1050;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 8px;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	[data-bs-theme=dark] .mobile-app-bottomnav {
		background: #1e1e2d;
		border-top-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
	}

	.mobile-bottomnav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		text-decoration: none;
		color: #a1a5b7;
		transition: color 0.2s ease;
		position: relative;
		gap: 2px;
		padding-top: 6px;
	}

	.mobile-bottomnav-item:hover,
	.mobile-bottomnav-item:active {
		text-decoration: none;
	}

	.mobile-bottomnav-item.active {
		color: #3b82f6;
	}

	.mobile-bottomnav-item.active::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 32px;
		height: 3px;
		background: #3b82f6;
		border-radius: 0 0 3px 3px;
	}

	/* No top indicator bar on the raised plus button */
	.mobile-bottomnav-plus.active::before {
		display: none !important;
	}

	[data-bs-theme=dark] .mobile-bottomnav-item {
		color: #565674;
	}

	[data-bs-theme=dark] .mobile-bottomnav-item.active {
		color: #818cf8;
	}

	[data-bs-theme=dark] .mobile-bottomnav-item.active::before {
		background: #818cf8;
	}

	.mobile-bottomnav-item i {
		font-size: 1.35rem;
	}

	.mobile-bottomnav-label {
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: -0.01em;
	}

	/* === Content adjustments with app shell === */
	body.mobile-app-shell-active #kt_footer {
		margin-bottom: 64px;
	}

	/* Hide the old contentHeader mobile logo on app shell */
	body.mobile-app-shell-active .d-flex.d-lg-none.align-items-center.ms-n3.me-2 {
		display: none !important;
	}

	/* Business dropdown overlay */
	.mobile-business-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1055;
		background: transparent;
	}

	.mobile-business-overlay.show {
		display: block;
	}

	/* === Mobile Drawer Quick Nav === */
	.mobile-drawer-quick-nav {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.mobile-drawer-nav-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-radius: 10px;
		color: #181c32;
		text-decoration: none;
		font-size: 0.9rem;
		font-weight: 500;
		transition: all 0.2s ease;
		direction: rtl;
	}

	.mobile-drawer-nav-item:hover,
	.mobile-drawer-nav-item:active {
		background: rgba(59, 130, 246, 0.08);
		color: #3b82f6;
		text-decoration: none;
	}

	.mobile-drawer-nav-item.active {
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(99, 102, 241, 0.12) 100%);
		color: #3b82f6;
		font-weight: 600;
	}

	.mobile-drawer-nav-item.disabled {
		color: #c4c4d4;
		cursor: default;
		pointer-events: none;
	}

	.mobile-drawer-nav-item i {
		color: #7e8299;
		flex-shrink: 0;
	}

	.mobile-drawer-nav-item.active i,
	.mobile-drawer-nav-item:hover i {
		color: #3b82f6;
	}

	.mobile-drawer-nav-item.disabled i {
		color: #c4c4d4;
	}

	[data-bs-theme=dark] .mobile-drawer-nav-item {
		color: #f1f1f4;
	}

	[data-bs-theme=dark] .mobile-drawer-nav-item:hover {
		background: rgba(99, 102, 241, 0.15);
		color: #818cf8;
	}

	[data-bs-theme=dark] .mobile-drawer-nav-item.active {
		background: rgba(99, 102, 241, 0.15);
		color: #818cf8;
	}

	[data-bs-theme=dark] .mobile-drawer-nav-item.disabled {
		color: #565674;
	}

	[data-bs-theme=dark] .mobile-drawer-nav-item i {
		color: #b5b5c3;
	}

	[data-bs-theme=dark] .mobile-drawer-nav-item.active i,
	[data-bs-theme=dark] .mobile-drawer-nav-item:hover i {
		color: #818cf8;
	}

	[data-bs-theme=dark] .mobile-drawer-nav-item.disabled i {
		color: #565674;
	}

	/* === Plus Button in Bottom Nav === */
	.mobile-bottomnav-plus {
		border: none;
		cursor: pointer;
		position: relative;
		flex: 0 0 auto !important;
		width: 48px;
		height: 48px;
		min-width: 48px;
		border-radius: 50%;
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
		color: #ffffff !important;
		box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		margin-top: -20px;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.mobile-bottomnav-plus i {
		font-size: 1.5rem !important;
		color: #ffffff !important;
		transition: transform 0.3s ease;
	}

	.mobile-bottomnav-plus .mobile-bottomnav-label {
		display: none !important;
	}

	.mobile-bottomnav-plus:active {
		transform: scale(0.92);
		box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
	}

	.mobile-bottomnav-plus.active {
		color: #ffffff !important;
	}

	.mobile-bottomnav-plus.active i {
		transform: rotate(45deg);
	}

	[data-bs-theme=dark] .mobile-bottomnav-plus {
		background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
		box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
		color: #ffffff !important;
	}

	[data-bs-theme=dark] .mobile-bottomnav-plus i {
		color: #ffffff !important;
	}

	[data-bs-theme=dark] .mobile-bottomnav-plus.active {
		color: #ffffff !important;
	}

	/* Hide the desktop plus button when mobile app shell is active */
	body.mobile-app-shell-active #plus-button,
	body.mobile-app-shell-active #plus-menu-dropdown {
		display: none !important;
	}

	/* === Mobile Loading Bar === */
	.mobile-loading-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		z-index: 10001;
		pointer-events: none;
		overflow: hidden;
	}

	.mobile-loading-bar::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 40%;
		height: 100%;
		background: #3b82f6;
		border-radius: 2px;
		animation: mobileLoadingSlide 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	}

	[data-bs-theme=dark] .mobile-loading-bar::after {
		background: #818cf8;
	}

	.mobile-loading-bar.fade-out {
		animation: mobileBarFadeOut 0.3s ease forwards;
	}

	@keyframes mobileLoadingSlide {
		0% { left: -40%; }
		100% { left: 100%; }
	}

	@keyframes mobileBarFadeOut {
		to { opacity: 0; }
	}

	/* Hide approved sections on mobile when in drafts view */
	.mobile-expenses-approved-only {
		display: none !important;
	}

	/* === Plus Button Popup Menu === */
	.mobile-plus-popup {
		display: none;
		position: fixed;
		bottom: 76px;
		left: 12px;
		min-width: 200px;
		background: #ffffff;
		border-radius: 16px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
		border: 1px solid rgba(0, 0, 0, 0.06);
		padding: 12px;
		z-index: 1051;
		animation: plusPopupIn 0.2s ease-out;
		direction: rtl;
	}

	.mobile-plus-popup.show {
		display: block;
	}

	@keyframes plusPopupIn {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 1; transform: translateY(0); }
	}

	[data-bs-theme=dark] .mobile-plus-popup {
		background: #1e1e2d;
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	}

	.mobile-plus-popup-title {
		font-size: 0.8rem;
		font-weight: 700;
		color: #7e8299;
		padding: 4px 8px 8px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		margin-bottom: 4px;
	}

	[data-bs-theme=dark] .mobile-plus-popup-title {
		color: #b5b5c3;
		border-bottom-color: rgba(255, 255, 255, 0.06);
	}

	.mobile-plus-popup-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 8px;
		border-radius: 10px;
		color: #181c32;
		text-decoration: none;
		font-size: 0.9rem;
		font-weight: 500;
		transition: background 0.15s ease;
		border: none;
		background: none;
		width: 100%;
		text-align: right;
		cursor: pointer;
	}

	.mobile-plus-popup-item:hover,
	.mobile-plus-popup-item:active {
		background: rgba(59, 130, 246, 0.08);
		color: #3b82f6;
		text-decoration: none;
	}

	.mobile-plus-popup-item i {
		color: #7e8299;
		flex-shrink: 0;
	}

	.mobile-plus-popup-item:hover i,
	.mobile-plus-popup-item:active i {
		color: #3b82f6;
	}

	[data-bs-theme=dark] .mobile-plus-popup-item {
		color: #f1f1f4;
	}

	[data-bs-theme=dark] .mobile-plus-popup-item:hover {
		background: rgba(99, 102, 241, 0.15);
		color: #818cf8;
	}

	[data-bs-theme=dark] .mobile-plus-popup-item i {
		color: #b5b5c3;
	}

	[data-bs-theme=dark] .mobile-plus-popup-item:hover i {
		color: #818cf8;
	}

	.mobile-plus-popup-group {
		display: none;
	}

	/* === Mobile Drafts Empty State === */
	.mobile-drafts-empty {
		padding: 24px 16px;
	}

	.mobile-drafts-empty-card {
		background: #ffffff;
		border-radius: 16px;
		padding: 32px 20px;
		text-align: center;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(0, 0, 0, 0.06);
	}

	[data-bs-theme=dark] .mobile-drafts-empty-card {
		background: #1e1e2d;
		border-color: rgba(255, 255, 255, 0.06);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	}

	.mobile-drafts-empty-title {
		font-size: 1.25rem;
		font-weight: 700;
		color: #181c32;
		margin-bottom: 12px;
		font-family: "Calibri Light", "Open Sans", sans-serif;
	}

	[data-bs-theme=dark] .mobile-drafts-empty-title {
		color: #f1f1f4;
	}

	.mobile-drafts-empty-text {
		font-size: 0.85rem;
		color: #7e8299;
		line-height: 1.6;
		margin-bottom: 20px;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}

	[data-bs-theme=dark] .mobile-drafts-empty-text {
		color: #b5b5c3;
	}

	.mobile-drafts-empty-icon {
		margin-bottom: 16px;
	}

	.mobile-drafts-empty-icon svg {
		opacity: 0.3;
	}

	/* === Mobile Drafts List === */
	.mobile-drafts-list {
		padding: 12px 16px;
	}

	.mobile-drafts-list-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px 4px 12px;
	}

	.mobile-drafts-list-title {
		font-size: 1.1rem;
		font-weight: 700;
		color: #181c32;
		font-family: "Calibri Light", "Open Sans", sans-serif;
	}

	.mobile-drafts-whatsapp-btn {
		width: 34px;
		height: 34px;
		border: none;
		background: #25d366;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.1rem;
		flex-shrink: 0;
		transition: opacity 0.15s ease;
	}
	.mobile-drafts-whatsapp-btn:active {
		opacity: 0.8;
	}

	[data-bs-theme=dark] .mobile-drafts-list-title {
		color: #f1f1f4;
	}

	.mobile-drafts-list-count {
		font-size: 0.85rem;
		color: #7e8299;
	}

	.mobile-draft-item {
		display: flex;
		align-items: center;
		gap: 12px;
		background: #ffffff;
		border-radius: 12px;
		padding: 12px;
		margin-bottom: 8px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
		border: 1px solid rgba(0, 0, 0, 0.04);
		cursor: pointer;
		transition: all 0.15s ease;
		direction: rtl;
	}

	.mobile-draft-item:active {
		background: #f8f9fa;
		transform: scale(0.99);
	}

	[data-bs-theme=dark] .mobile-draft-item {
		background: #1e1e2d;
		border-color: rgba(255, 255, 255, 0.04);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}

	[data-bs-theme=dark] .mobile-draft-item:active {
		background: #27293d;
	}

	.mobile-draft-item-thumb {
		width: 56px;
		height: 56px;
		border-radius: 8px;
		overflow: hidden;
		flex-shrink: 0;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	[data-bs-theme=dark] .mobile-draft-item-thumb {
		background: #27293d;
	}

	.mobile-draft-item-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.mobile-draft-item-spinner,
	.mobile-draft-item-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: #a1a5b7;
	}

	.mobile-draft-item-info {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.mobile-draft-item-type {
		font-size: 0.9rem;
		font-weight: 600;
		color: #181c32;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	[data-bs-theme=dark] .mobile-draft-item-type {
		color: #f1f1f4;
	}

	.mobile-draft-item-amount {
		font-size: 0.9rem;
		font-weight: 600;
		color: #181c32;
	}

	[data-bs-theme=dark] .mobile-draft-item-amount {
		color: #f1f1f4;
	}

	.mobile-draft-item-vat {
		font-size: 0.9rem;
		font-weight: 600;
		color: #181c32;
	}

	[data-bs-theme=dark] .mobile-draft-item-vat {
		color: #f1f1f4;
	}

	.mobile-draft-item-badges {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex-shrink: 0;
	}

	.mobile-draft-item-badges .badge {
		font-size: 0.65rem;
		white-space: nowrap;
	}

	.mobile-draft-item-arrow {
		flex-shrink: 0;
		color: #c4c4d4;
		display: none;
		align-items: center;
	}

	[data-bs-theme=dark] .mobile-draft-item-arrow {
		color: #565674;
	}

	.mobile-drafts-list-footer {
		display: flex;
		justify-content: center;
		padding: 12px 0 4px;
	}

	/* === Mobile Filter Bottom Sheet === */

	/* Hide desktop filter grid and expansion button on mobile */
	body.mobile-app-shell-active .card-title > .d-grid {
		display: none !important;
	}
	body.mobile-app-shell-active #filtersExpansion {
		display: none !important;
	}
	/* Hide clients page inline filter container on mobile */
	body.mobile-app-shell-active .card-title > .d-flex.gap-3.ms-2 {
		display: none !important;
	}

	/* Search input full-width + filter button layout */
	body.mobile-app-shell-active .card-title {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
	}
	body.mobile-app-shell-active .card-title > .d-flex.align-items-center.position-relative.my-1 {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		max-width: calc(100% - 48px) !important;
		margin: 0 !important;
		width: auto !important;
	}
	body.mobile-app-shell-active .card-title .input-group {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Filter icon button */
	.mobile-filter-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		min-width: 40px;
		border: 1px solid #e4e6ef;
		background: #f5f8fa;
		border-radius: 8px;
		color: #5e6278;
		font-size: 1.1rem;
		cursor: pointer;
		transition: all 0.2s ease;
		flex-shrink: 0;
		position: relative;
	}

	.mobile-filter-btn:active {
		background: rgba(59, 130, 246, 0.1);
		color: #3b82f6;
		border-color: #3b82f6;
	}

	.mobile-filter-btn .mobile-filter-badge {
		position: absolute;
		top: -4px;
		right: -4px;
		width: 16px;
		height: 16px;
		background: #3b82f6;
		border-radius: 50%;
		font-size: 0.6rem;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
	}

	/* Bottom sheet overlay */
	.mobile-filter-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 10000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.mobile-filter-overlay.open {
		opacity: 1;
		visibility: visible;
	}

	/* Bottom sheet container */
	.mobile-filter-sheet {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		max-height: 80vh;
		background: #ffffff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
		z-index: 10001;
		display: flex;
		flex-direction: column;
		transform: translateY(100%);
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mobile-filter-sheet.open {
		transform: translateY(0);
	}

	[data-bs-theme=dark] .mobile-filter-sheet {
		background: #1e1e2d;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
	}

	/* Sheet header */
	.mobile-filter-sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px 8px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		flex-shrink: 0;
		direction: rtl;
	}

	[data-bs-theme=dark] .mobile-filter-sheet-header {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}

	.mobile-filter-sheet-handle {
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 36px;
		height: 4px;
		background: #d1d5db;
		border-radius: 2px;
	}

	[data-bs-theme=dark] .mobile-filter-sheet-handle {
		background: #565674;
	}

	.mobile-filter-sheet-header span {
		font-weight: 700;
		font-size: 1.05rem;
		color: #181c32;
	}

	[data-bs-theme=dark] .mobile-filter-sheet-header span {
		color: #f1f1f4;
	}

	.mobile-filter-sheet-close {
		border: none;
		background: transparent;
		font-size: 1.5rem;
		color: #7e8299;
		cursor: pointer;
		padding: 0;
		line-height: 1;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		transition: background 0.15s ease;
	}

	.mobile-filter-sheet-close:active {
		background: rgba(0, 0, 0, 0.06);
	}

	/* Sheet body - scrollable */
	.mobile-filter-sheet-body {
		flex: 1;
		overflow-y: auto;
		padding: 8px 16px 16px;
		-webkit-overflow-scrolling: touch;
		direction: rtl;
	}

	/* Sheet footer - sticky apply/reset */
	.mobile-filter-sheet-footer {
		display: flex;
		gap: 10px;
		padding: 12px 16px;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		flex-shrink: 0;
		direction: rtl;
	}

	[data-bs-theme=dark] .mobile-filter-sheet-footer {
		border-top-color: rgba(255, 255, 255, 0.08);
	}

	.mobile-filter-sheet-footer .btn {
		flex: 1;
		border-radius: 10px;
		font-weight: 600;
		padding: 10px 0;
		font-size: 0.95rem;
	}

	/* === Inside bottom sheet - restyle filters === */

	/* Filter grid becomes vertical stack */
	.mobile-filter-sheet .d-grid,
	.mobile-filter-sheet .d-flex.gap-3 {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		grid-template-columns: unset !important;
	}

	/* Show dropdown menus as always-open static blocks */
	.mobile-filter-sheet .dropdown-menu {
		display: block !important;
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		min-width: auto !important;
		transform: none !important;
		margin: 0 !important;
		padding: 4px 0 !important;
		background: transparent !important;
		float: none !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
	}

	/* Hide dropdown toggle buttons */
	.mobile-filter-sheet .dropdown-toggle {
		display: none !important;
	}

	/* Hide individual filter apply/reset buttons */
	.mobile-filter-sheet #applyExpenseTypeFilter,
	.mobile-filter-sheet #resetExpenseTypeFilter,
	.mobile-filter-sheet #applyDocTypeFilter,
	.mobile-filter-sheet #resetDocTypeFilter,
	.mobile-filter-sheet #applyStatusFilter,
	.mobile-filter-sheet #resetStatusFilter,
	.mobile-filter-sheet #applyPaymentMethodFilter,
	.mobile-filter-sheet #resetPaymentMethodFilter,
	.mobile-filter-sheet #applyAmountFilter,
	.mobile-filter-sheet #resetAmountFilter,
	.mobile-filter-sheet #applyCustomRange,
	.mobile-filter-sheet #resetDateFilter,
	.mobile-filter-sheet #applyIncomeTypeFilter,
	.mobile-filter-sheet #resetIncomeTypeFilter,
	.mobile-filter-sheet #applyIncomeDocTypeFilter,
	.mobile-filter-sheet #resetIncomeDocTypeFilter,
	.mobile-filter-sheet #applyIncomeStatusFilter,
	.mobile-filter-sheet #resetIncomeStatusFilter,
	.mobile-filter-sheet #applyTagsFilter {
		display: none !important;
	}

	/* Each filter container gets a section header look */
	.mobile-filter-sheet .date-filter-container,
	.mobile-filter-sheet .expense-type-filter-container,
	.mobile-filter-sheet .doc-type-filter-container,
	.mobile-filter-sheet .status-filter-container,
	.mobile-filter-sheet .payment-method-filter-container,
	.mobile-filter-sheet .amount-filter-container,
	.mobile-filter-sheet .income-type-filter-container,
	.mobile-filter-sheet .income-doc-type-filter-container,
	.mobile-filter-sheet .income-status-filter-container,
	.mobile-filter-sheet .tags-filter-container {
		border-bottom: 1px solid #eee;
		padding: 10px 0;
	}

	[data-bs-theme=dark] .mobile-filter-sheet .date-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .expense-type-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .doc-type-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .status-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .payment-method-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .amount-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .income-type-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .income-doc-type-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .income-status-filter-container,
	[data-bs-theme=dark] .mobile-filter-sheet .tags-filter-container {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}

	/* Filter section titles inside the sheet */
	.mobile-filter-sheet .dropdown-menu .px-4.py-3.border-bottom {
		padding: 0 0 6px 0 !important;
		border-bottom: none !important;
	}

	.mobile-filter-sheet .dropdown-menu .px-4.py-3.border-bottom h6 {
		font-size: 0.9rem;
		color: #3b82f6;
		font-weight: 700;
	}

	/* Filter list items in sheet */
	.mobile-filter-sheet .list-group-item {
		border-radius: 8px !important;
		padding: 8px 10px !important;
		font-size: 0.85rem !important;
	}

	/* Hide the expansion button wrapper inside sheet */
	.mobile-filter-sheet .ps-25,
	.mobile-filter-sheet .ms-auto:has(#filtersExpansion) {
		display: none !important;
	}

	/* Hide ms-1 margin in sheet filter containers */
	.mobile-filter-sheet .ms-1 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Date filter custom range inside sheet */
	.mobile-filter-sheet .date-filter-container .row.g-2 {
		margin-bottom: 8px !important;
	}

	/* Amount filter inputs in sheet */
	.mobile-filter-sheet .amount-filter-container input[type="number"] {
		width: 100% !important;
	}

	/* Body scroll lock when sheet is open */
	body.mobile-filter-sheet-open {
		overflow: hidden !important;
	}

	/* =============================================
	   Mobile Table Card Layout (2-column per row)
	   ============================================= */

	/* Match table wrapper width to card container */
	body.mobile-app-shell-active #kt_wrapper.dataTables_wrapper {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		box-sizing: border-box !important;
	}

	body.mobile-app-shell-active #kt_content_container {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Remove table min-width and horizontal scroll */
	body.mobile-app-shell-active .table-responsive {
		overflow-x: visible !important;
	}

	body.mobile-app-shell-active #expensesTable,
	body.mobile-app-shell-active #incomesTable,
	body.mobile-app-shell-active #managementDocsTable {
		display: block !important;
		min-width: auto !important;
		width: 100% !important;
		border-collapse: collapse !important;
		border-spacing: 0 !important;
	}

	body.mobile-app-shell-active #expensesTable > tbody,
	body.mobile-app-shell-active #incomesTable > tbody,
	body.mobile-app-shell-active #managementDocsTable > tbody {
		display: block !important;
		width: 100% !important;
	}

	/* Hide table headers */
	body.mobile-app-shell-active #expensesTable > thead,
	body.mobile-app-shell-active #incomesTable > thead,
	body.mobile-app-shell-active #managementDocsTable > thead {
		display: none !important;
	}

	/* Data rows → 2-column grid */
	body.mobile-app-shell-active #expensesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row),
	body.mobile-app-shell-active #incomesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row),
	body.mobile-app-shell-active #managementDocsTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) {
		display: grid !important;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto;
		gap: 2px 12px;
		padding: 10px 12px !important;
		border-bottom: 1px solid #eee !important;
		border-top: none !important;
		background: #fff;
		box-shadow: none !important;
		transform: none !important;
	}

	[data-bs-theme=dark] body.mobile-app-shell-active #expensesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row),
	[data-bs-theme=dark] body.mobile-app-shell-active #incomesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row),
	[data-bs-theme=dark] body.mobile-app-shell-active #managementDocsTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) {
		background: #1e1e2d;
		border-bottom-color: rgba(255, 255, 255, 0.06) !important;
	}

	/* Reset all td inside grid rows */
	body.mobile-app-shell-active #expensesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td,
	body.mobile-app-shell-active #incomesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td,
	body.mobile-app-shell-active #managementDocsTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td {
		padding: 1px 0 !important;
		border: none !important;
		text-align: right !important;
		font-size: 0.85rem !important;
		white-space: normal !important;
	}

	/* Expand truncated text in card layout */
	body.mobile-app-shell-active .truncate,
	body.mobile-app-shell-active .truncate-expense-type,
	body.mobile-app-shell-active .truncate-income-type {
		max-width: 160px !important;
	}

	/* --- EXPENSES TABLE (#expensesTable) ---
	   Columns: 1=status, 2=docNum, 3=date, 4=supplier, 5=desc, 6=expType, 7=amount, 8=vat, 9=actions
	   Show: 3,4,7 (col 1) + 6,1 (col 2)
	   Hide: 2,5,8,9 */

	body.mobile-app-shell-active #expensesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(2),
	body.mobile-app-shell-active #expensesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(5),
	body.mobile-app-shell-active #expensesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(8),
	body.mobile-app-shell-active #expensesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(9) {
		display: none !important;
	}

	/* Col 1 (right/RTL): date → supplier → amount */
	body.mobile-app-shell-active #expensesTable tbody td:nth-child(3) {
		grid-column: 1; grid-row: 1;
		color: #7e8299;
		font-size: 0.8rem !important;
	}
	body.mobile-app-shell-active #expensesTable tbody td:nth-child(4) {
		grid-column: 1; grid-row: 2;
		font-weight: 600;
	}
	body.mobile-app-shell-active #expensesTable tbody td:nth-child(7) {
		grid-column: 1; grid-row: 3;
		font-weight: 600;
		font-size: 1.05rem !important;
	}

	/* Col 2 (left/RTL): expense type → status badge */
	body.mobile-app-shell-active #expensesTable tbody td:nth-child(6) {
		grid-column: 2; grid-row: 1;
		text-align: left !important;
		font-size: 0.78rem !important;
	}
	body.mobile-app-shell-active #expensesTable tbody td:nth-child(1) {
		grid-column: 2; grid-row: 2;
		text-align: left !important;
	}

	/* --- INCOMES TABLE (#incomesTable) ---
	   Columns: 1=status, 2=docNum, 3=date, 4=docType, 5=client, 6=desc, 7=payMethod, 8=amount, 9=actions
	   Show: 3,5,8 (col 1) + 4,2,1 (col 2)
	   Hide: 6,7,9 */

	body.mobile-app-shell-active #incomesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(6),
	body.mobile-app-shell-active #incomesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(7),
	body.mobile-app-shell-active #incomesTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(9) {
		display: none !important;
	}

	/* Col 1: date → client → status */
	body.mobile-app-shell-active #incomesTable tbody td:nth-child(4) {
		grid-column: 2; grid-row: 1;
		text-align: left !important;
		font-size: 0.78rem !important;
	}
	body.mobile-app-shell-active #incomesTable tbody td:nth-child(2) {
		grid-column: 2; grid-row: 2;
		text-align: left !important;
		font-size: 0.8rem !important;
	}
	body.mobile-app-shell-active #incomesTable tbody td:nth-child(8) {
		grid-column: 2; grid-row: 3;
		font-weight: 600;
		font-size: 1.05rem !important;
	}

	/* Col 2: doc type → doc number → amount */


	body.mobile-app-shell-active #incomesTable tbody td:nth-child(3) {
		grid-column: 1; grid-row: 1;
		color: #7e8299;
		font-size: 0.8rem !important;
	}
	body.mobile-app-shell-active #incomesTable tbody td:nth-child(5) {
		grid-column: 1; grid-row: 2;
		font-weight: 600;
	}
	body.mobile-app-shell-active #incomesTable tbody td:nth-child(1) {
		grid-column: 1; grid-row: 3;
		text-align: left !important;
	}

	/* --- MANAGEMENT DOCS TABLE (#managementDocsTable) ---
	   Columns: 1=status, 2=docNum, 3=date, 4=docType, 5=client, 6=desc, 7=amount, 8=actions
	   Show: 3,5,7 (col 1) + 4,2,1 (col 2)
	   Hide: 6,8 */

	body.mobile-app-shell-active #managementDocsTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(6),
	body.mobile-app-shell-active #managementDocsTable tbody > tr:not(.month-header-row):not(.empty-spacer-row) > td:nth-child(8) {
		display: none !important;
	}

	/* Col 1: date → client → amount */
	body.mobile-app-shell-active #managementDocsTable tbody td:nth-child(3) {
		grid-column: 1; grid-row: 1;
		color: #7e8299;
		font-size: 0.8rem !important;
	}
	body.mobile-app-shell-active #managementDocsTable tbody td:nth-child(5) {
		grid-column: 1; grid-row: 2;
		font-weight: 600;
	}
	body.mobile-app-shell-active #managementDocsTable tbody td:nth-child(7) {
		grid-column: 1; grid-row: 3;
		font-weight: 600;
		font-size: 1.05rem !important;
	}

	/* Col 2: doc type → doc number → status */
	body.mobile-app-shell-active #managementDocsTable tbody td:nth-child(4) {
		grid-column: 2; grid-row: 1;
		text-align: left !important;
		font-size: 0.78rem !important;
	}
	body.mobile-app-shell-active #managementDocsTable tbody td:nth-child(2) {
		grid-column: 2; grid-row: 2;
		text-align: left !important;
		font-size: 0.8rem !important;
	}
	body.mobile-app-shell-active #managementDocsTable tbody td:nth-child(1) {
		grid-column: 2; grid-row: 3;
		text-align: left !important;
	}

	/* --- MONTH HEADER ROWS (all tables) --- */
	body.mobile-app-shell-active .month-header-row {
		display: flex !important;
		align-items: center !important;
		padding: 10px 12px !important;
		background: #e2e8f0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		transform: none !important;
	}

	[data-bs-theme=dark] body.mobile-app-shell-active .month-header-row {
		background: #27293d !important;
	}

	body.mobile-app-shell-active .month-header-row td:first-child {
		flex: 1;
		padding: 0 !important;
	}

	body.mobile-app-shell-active .month-header-row .month-header-cell {
		padding: 0 !important;
		border-radius: 0 !important;
	}

	body.mobile-app-shell-active .month-header-row .month-title-text {
		font-size: 1rem !important;
	}

	body.mobile-app-shell-active .month-header-row .summary-count-value {
		font-size: 0.8rem !important;
	}

	/* Amount td in month header */
	body.mobile-app-shell-active .month-header-row td:nth-child(2) {
		flex-shrink: 0;
		text-align: left !important;
		padding: 0 !important;
		font-size: 0.85rem;
		white-space: nowrap;
	}

	/* Hide VAT, report button, and any extra tds in month header */
	body.mobile-app-shell-active .month-header-row td:nth-child(n+3) {
		display: none !important;
	}

	/* Empty spacer rows */
	body.mobile-app-shell-active .empty-spacer-row {
		height: 12px !important;
	}

	body.mobile-app-shell-active .empty-spacer-row td {
		padding: 0 !important;
	}

	/* Remove btn styling from supplier/client links in card layout */
	body.mobile-app-shell-active #expensesTable tbody .btn.text-decoration-underline,
	body.mobile-app-shell-active #incomesTable tbody .btn.text-decoration-underline {
		padding: 0 !important;
		min-height: auto !important;
		text-decoration: none !important;
	}

	/* --- UI POLISH FIXES --- */

	/* Hide top title bar entirely on mobile (title, graphs, whatsapp btn) */
	body.mobile-app-shell-active .d-flex.align-items-center.mb-4.fs-1 {
		display: none !important;
	}

	/* Show page title on mobile */
	body.mobile-app-shell-active .mobile-page-title {
		display: block !important;
	}

	/* Title bar margin fix */
	body.mobile-app-shell-active div[style*="margin: 0 50px"] {
		margin: 0 12px !important;
		gap: 8px;
	}

	/* "הוצאות מאושרות" header row - single row with CSV on left */
	body.mobile-app-shell-active .d-flex.justify-content-between.align-items-lg-start {
		flex-direction: row !important;
		align-items: center !important;
		margin-top: 8px !important;
		padding-bottom: 4px !important;
	}
	body.mobile-app-shell-active .d-flex.justify-content-between.align-items-lg-start.mt-10 {
		margin-top: 8px !important;
	}
	body.mobile-app-shell-active .d-flex.justify-content-between.align-items-lg-start h1 {
		font-size: 1rem !important;
		margin-bottom: 0 !important;
	}

	/* CSV export button - compact, auto-width next to title */
	body.mobile-app-shell-active #exportButtons {
		width: auto !important;
		flex-shrink: 0;
		margin-top: 0 !important;
	}
	body.mobile-app-shell-active #exportButtons .dt-buttons {
		width: auto !important;
		justify-content: flex-start !important;
	}
	body.mobile-app-shell-active #exportButtons .dt-buttons .btn {
		flex: 0 0 auto !important;
		min-width: auto !important;
		margin: 0 !important;
	}
	body.mobile-app-shell-active #exportButtons .btn-export-csv {
		font-size: 0.75rem !important;
		padding: 4px 12px !important;
		transform: none !important;
	}

	/* Filter search + button alignment and spacing */
	body.mobile-app-shell-active .card-header {
		padding: 10px 12px !important;
		min-height: auto !important;
	}
	body.mobile-app-shell-active .card-header.pb-5 {
		padding-bottom: 10px !important;
	}
	body.mobile-app-shell-active .card-header.ps-5 {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
	body.mobile-app-shell-active .card-header .card-title {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
		flex-wrap: nowrap !important;
	}
	body.mobile-app-shell-active .card-title > .d-flex.align-items-center.position-relative.my-1 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* Reduce spacing between filter card and table */
	body.mobile-app-shell-active .card {
		margin-bottom: 0 !important;
	}
	body.mobile-app-shell-active #kt_content_container {
		margin-top: 4px !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
	}
	body.mobile-app-shell-active #kt_content_container .card + div,
	body.mobile-app-shell-active .dataTables_wrapper {
		margin-top: 0 !important;
	}

	/* Month header - modern font and no bottom border */
	body.mobile-app-shell-active .month-header-row {
		border-bottom: none !important;
	}
	body.mobile-app-shell-active .month-header-row .month-title-text {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
		font-weight: 700 !important;
		letter-spacing: -0.01em;
		color: #334155 !important;
	}
	[data-bs-theme=dark] body.mobile-app-shell-active .month-header-row .month-title-text {
		color: #e2e8f0 !important;
	}

	/* === Draft item 3-dots action menu === */
	.mobile-draft-item-actions {
		position: relative;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
	.mobile-draft-dots-btn {
		width: 32px;
		height: 32px;
		border: none;
		background: transparent;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #a1a5b7;
		font-size: 0.9rem;
		transition: all 0.15s ease;
	}
	.mobile-draft-dots-btn:active {
		background: rgba(59, 130, 246, 0.1);
		color: #3b82f6;
	}
	.mobile-draft-menu {
		position: absolute;
		left: 0;
		top: 100%;
		min-width: 150px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
		border: 1px solid rgba(0, 0, 0, 0.06);
		padding: 6px;
		z-index: 100;
		direction: rtl;
	}
	[data-bs-theme=dark] .mobile-draft-menu {
		background: #1e1e2d;
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
	}
	.mobile-draft-menu-item {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 8px 12px;
		border: none;
		background: none;
		border-radius: 8px;
		font-size: 0.85rem;
		font-weight: 500;
		color: #181c32;
		cursor: pointer;
		transition: background 0.15s ease;
	}
	.mobile-draft-menu-item:active {
		background: rgba(0, 0, 0, 0.04);
	}
	.mobile-draft-menu-item i {
		font-size: 0.85rem;
		width: 18px;
		text-align: center;
	}
	.mobile-draft-menu-item.text-success {
		color: #50cd89 !important;
	}
	.mobile-draft-menu-item.text-danger {
		color: #f1416c !important;
	}
	[data-bs-theme=dark] .mobile-draft-menu-item {
		color: #f1f1f4;
	}
}