body {
	/* font-family: 'Roboto', sans-serif; */
	font-family: 'Poppins', sans-serif
}

.color-white {
	color: #ffffff;
}

.btn-white {
	background-color: #ffffff;
	color: black;
	border-radius: 20px;
}

.page-title-box {
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.btn-icon {
	border: none;
	background: none;
}

/* Barcode modal styles */
#barcodeModal .modal-dialog {
	max-width: 90vw;
}

#barcodeModal .modal-body {
	text-align: center;
}

#barcodeModal video {
	width: 100% !important;
	height: auto !important;
	max-height: 80vh;
	object-fit: cover;
	border-radius: 8px;
}

#barcodeModal #barcode-scanner {
	max-height: 80vh;
	overflow: hidden;
}

/* DataTables adjustment */
.dataTables_wrapper {
	padding: 0 !important;
}

.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 991px) {

	.dataTables_filter,
	.dataTables_length,
	.dataTables_info,
	.dataTables_paginate {
		text-align: center !important;
		float: none !important;
		margin: 10px 0 !important;
	}
}

/* Mobile Form Stacking for Add Pages */
@media screen and (max-width: 991px) {

	/* Stacking for forms and generic stacked tables */
	form table:not(.datatable):not(#datatable),
	.stacked-mobile-table {
		display: block;
	}

	form table:not(.datatable):not(#datatable) thead,
	.stacked-mobile-table thead {
		display: none;
		/* Hide headers on vertical stacking */
	}

	form table:not(.datatable):not(#datatable) tbody,
	form table:not(.datatable):not(#datatable) tr,
	form table:not(.datatable):not(#datatable) td,
	.stacked-mobile-table tbody,
	.stacked-mobile-table tr,
	.stacked-mobile-table td {
		display: block;
		width: 100% !important;
	}

	form table:not(.datatable):not(#datatable) tr,
	.stacked-mobile-table tr {
		border: 1px solid #e0e0e0;
		margin-bottom: 20px;
		padding: 15px;
		border-radius: 8px;
		background: #fdfdfd;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	}

	form table:not(.datatable):not(#datatable) td,
	.stacked-mobile-table td {
		border: none !important;
		padding: 10px 5px !important;
		position: relative;
		text-align: left !important;
		border-bottom: 1px solid #f0f0f0 !important;
	}

	form table:not(.datatable):not(#datatable) td:last-child,
	.stacked-mobile-table td:last-child {
		border-bottom: none !important;
	}

	/* Add labels via data-label if needed */
	form table:not(.datatable):not(#datatable) td:before,
	.stacked-mobile-table td:before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: #333;
		font-weight: 500;
		font-size: 13px;
	}

	/* Fixed width/height in mobile menu can hide text */
	body[data-sidebar=dark] #sidebar-menu ul li a {
		height: auto !important;
		min-height: 45px;
	}

	/* Ensure action buttons don't look weird */
	form table:not(.datatable):not(#datatable) td .btn,
	.stacked-mobile-table td .btn {
		width: 100%;
		margin-bottom: 10px;
		display: block;
	}

	.stacked-mobile-table td form {
		display: block;
		width: 100%;
	}
}

/* Fix Select2 Mobile Selection Bug */
.select2-container--default .select2-selection--single {
	outline: none !important;
}

/* Stacking refinement: ensure inputs in stacked tables are full width */
@media screen and (max-width: 991px) {

	form table:not(.datatable):not(#datatable) td .form-control,
	form table:not(.datatable):not(#datatable) td .select2-container,
	form table:not(.datatable):not(#datatable) td .input-group {
		width: 100% !important;
		margin-top: 5px;
	}
}

/* General Mobile Improvements */
@media (max-width: 767px) {
	.page-content {
		padding-top: 100px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.card-body {
		padding: 15px !important;
	}

	.container-fluid {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	#barcodeModal .modal-dialog {
		max-width: 95vw;
	}

	#barcodeModal video {
		max-height: 60vh;
	}



	/* Make buttons full width on small screens if needed */
	.btn-lg {
		width: 100%;
		margin-bottom: 10px;
	}

	/* Force overflow visible for Select2 dropdowns on mobile */
	.card,
	.card-body,
	.page-content,
	.main-content {
		overflow: visible !important;
	}

	/* Adjust mobile logo size */
	.navbar-brand-box {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		padding: 0 15px !important;
	}

	.logo-sm img {
		width: 110px !important;
		height: auto !important;
		max-height: 65px !important;
	}

	.logo-lg img {
		width: 220px !important;
		height: auto !important;
		max-height: 70px !important;
	}

	.logo-sm,
	.logo-lg {
		width: auto !important;
	}
}





.table-responsive {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}

/* Ensure Select2 is above content but below side menu (1001) */
.select2-container {
	z-index: 999 !important;
}





@media (max-width: 991px) {

	/* Fix footer hiding the 'Add' button on mobile */
	.page-content {
		padding-bottom: 120px !important;
	}

	form .btn-lg {
		margin-bottom: 25px;
	}
}

/* Fix mobile menu link visibility */
body[data-sidebar=dark] #sidebar-menu ul li a {
	display: flex !important;
	visibility: visible !important;
}