.my-label-checked {
	background-color: green;
	color: white;
}

.my-label-unchecked {
	background-color: gray;
	color: black;
}

hr {
	border-width: 2px;
	opacity: 0.05;
}

hr.dark {
	opacity: 0.15;
}

.loginscreen {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	align-items: center;
	height: 100vh;
	background: url("../../img/mcl_v2_logo/login-background.jpg");
	background-size: cover;
}

.loginscreen .brand {
	background-repeat: no-repeat;
	background-size: 260px;
}

.loginscreen .brand {
	font: 0/0 a;
	color: transparent;
	text-shadow: none;
	background-color: transparent;
	border: 0;
	display: block;
	width: 260px;
	height: 60px;
	background-image: url("../../img/mcl_v2_logo/template_logo.png");
}

div#advancedSearch .form-check-input {
	border: 1px solid;
}

.sidebar-wrapper li.nav-item i,
.sidebar-wrapper li.nav-item p {
	color: #fff !important;
}

.listed-on .flex-wrap i,
.products-on-channels .flex-wrap i {
	font-size: x-large;
}

.listed-on .flex-wrap i.fa-ebay,
.products-on-channels .flex-wrap i.fa-ebay {
	font-size: xx-large !important;
}

#alertsContainer {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1080;
	width: 520px;
}

#alertsContainer .alert+.alert {
	margin-top: 0.5rem;
}

.switch.btn-toggle {
	margin: 0 4rem;
	padding: 0;
	position: relative;
	border: none;
	height: 1.5rem;
	width: 3rem;
	border-radius: 1.5rem;
	color: #6b7381;
	background: #bdc1c8;
}

.switch.btn-toggle:focus,
.switch.btn-toggle:focus.active,
.switch.btn-toggle.focus,
.switch.btn-toggle.focus.active {
	outline: none;
}

.switch.btn-toggle:before,
.switch.btn-toggle:after {
	line-height: 1.5rem;
	width: 4rem;
	text-align: center;
	font-weight: 600;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: absolute;
	bottom: 0;
	transition: opacity .25s;
}

.switch.btn-toggle:before {
	content: 'Off';
	left: -4rem;
}

.switch.btn-toggle:after {
	content: 'On';
	right: -4rem;
	opacity: .5;
}

.switch.btn-toggle>.handle {
	position: absolute;
	top: 0.1875rem;
	left: 0.1875rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 1.125rem;
	background: #fff;
	transition: left .25s;
}

.switch.btn-toggle.active {
	transition: background-color .25s;
}

.switch.btn-toggle.active {
	background-color: #29b5a8;
}

.switch.btn-toggle.active>.handle {
	left: 1.6875rem;
	transition: left .25s;
}

.switch.btn-toggle.active:before {
	opacity: .5;
}

.switch.btn-toggle.active:after {
	opacity: 1;
}

/* start -modify alert messages */
.form-alert-notification .alert-success {
	border-left: 6px solid #2daf31;
	background-color: #31ce36bf;
	color: #fff;
	font-size: large;
}

.form-alert-notification .alert-danger {
	border-left: 6px solid #f25959;
	background-color: #f1000057;
	color: #fff;
	font-size: large;
}

/* end -modify alert messages */

.nav-pills.flex-column.nav-pills-no-bd .nav-link {

	display: flex;
	gap: 8px;
	align-items: center;
}

.form-control,
.form-select,
.form-check-input {
	border-color: #a5a5a5;
	border-width: 1px;
}

.card .card-footer,
.card-light .card-footer {

	border-top: 1px solid #c7c7c7 !important;
}

.input-group-text,
#dropdown_select_globaly {
	border-color: #858383 !important;
}


form label {
	color: #595959 !important;
	font-size: 14px !important;
	font-weight: 600;
}

.swal-title,
.swal-text {
	text-align: center !important;
}

.navbar .navbar-nav .notification {
	background-color: rgb(104, 97, 206) !important;

}

/* Base list setup */
.responsive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Header row */
.responsive-list .header-row {
	background-color: #f0f0f0;
	font-weight: bold;
	margin-bottom: 0;
}

/* Product rows */
.product-item {
	border: 1px solid #babdc3;
	margin-bottom: 0;
	transition: background-color 0.2s;
	display: flex;
	align-items: stretch;
}

/* Each column inside (e.g. .col-md-2) can be flex children, filling available vertical space */
.product-item .col-md-2 {
	display: flex;
	flex-direction: column;
	/* optionally */
	justify-content: start;
	/* if you want top + bottom content aligned nicely */
}

/* If there are inner blocks inside columns that you want to fill full height: */
.product-item .col-md-2 .inner-block {
	flex: 1;
}

.product-item:hover {
	background-color: #f8f9fa;
}

/* Product title section */
.product-data-block .thumb {
	width: 60px;
	height: 60px;
	object-fit: cover;
	margin-bottom: 0.5rem;
}

.product-data-block h5 {
	line-height: 1.2;
	margin-bottom: 0.75rem;
}

/* Badge styling */
.badge {
	font-size: 0.75rem;
	border-radius: 999px;
	padding: 0.35em 0.65em;
}

/* Add right border on first column (desktop) */
.product-data-block {
	border-right: 1px solid #bdbdbd;

}

.product-data-block:first-child {
	border-left: 1px solid #bdbdbd;

}

.product-data-block>div {
	padding-left: 15px;
	padding-right: 15px;
}


.ul-structure .border-bottom {
	border-color: #333333 !important;
}

.ul-structure .list-group .list-group-item {
	border-color: #333333;
	padding: 0;
}

.small-status-divs .mb-1 {
	margin-bottom: 0.25rem !important;
}

.small-status-divs .p-2 {
	padding: 0.25rem 0.5rem !important;
	/* reduce padding if you want more compact */
}

.small-status-divs div {
	font-size: 0.9rem;
	/* slightly smaller text */
}

.small-status-divs .badge {
	font-size: 0.8rem;
	/* make badges smaller if required */
}


/* Child row styling */
.product-row {
	background-color: #f9f9f9;
	/* light background */
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 10px;
	transition: background-color 0.3s ease;
}

/* Hover effect */
.product-row:hover {
	background-color: #f1f1f1;
	/* light cyan on hover */
}

/* Optional: smooth shadow for hover */
.product-row:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Make images consistent */
.product-row img {
	width: 150px;
	border-radius: 4px;
}

.badge {
	font-size: 0.9rem;

}


.super-admin-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	cursor: pointer;

}

.admin-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	cursor: pointer;
	background: #fff;
	border: 1px solid #dee2e6;
}

.admin-card:hover,
.super-admin-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.super-avatar {
	box-shadow: 0 0 10px rgba(255, 193, 7, 0.8);
}

.blur-backdrop {
	backdrop-filter: blur(6px);
	background-color: rgba(0, 0, 0, 0.3);
	/* optional */
}

.dropdown-cc ul.dropdown-menu li:hover,
.dropdown-cc ul.dropdown-menu li a:hover {
	background-color: #666666;
	color: #fff;
	font-weight: 700;
}

.dropdown-cc ul.dropdown-menu li.row-delete:hover,
.dropdown-cc ul.dropdown-menu li.row-delete a:hover {
	background-color: #f25961;
	color: #fff;
	font-weight: 700;
}

.dropdown-cc ul.dropdown-menu li.dropdown-header:hover,
.dropdown-cc ul.dropdown-menu li.dropdown-header a:hover {
	background-color: rgba(102, 102, 102, 0.5);
	color: #fff;
	font-weight: 700;
}

.card .card-header,
.card-light .card-header {
	padding: 10px 12px;
	background-color: #777777 !important;

	border-bottom: 0px solid #777777 !important;
}


.card .card-header .card-title {
	color: #ffffff;
}

.barcode {
	max-width: 200px !important;
	border-radius: 0px !important;
	max-height: 65px !important;
	width: 180px !important;
}

h6.child-label:last-child {
	border-right: 0;
}

h6.child-label {
	font-size: 10px;
	border-right: 1px solid;
	padding-right: 5px;
}

.view-children-data .block-height {
	min-height: 75px;
}

.bg-custom {
	width: -webkit-fill-available;
}

.custom-width {
	max-width: 140px;
}

.custom-width-qty {
	max-width: 120px;
}

.my-table-cell[data-label="Quantity"] .form-control.form-input {
	width: 60px
}

.view-children-data {
	max-height: calc(4 *
			/* approx height of one row */
			120px);
	/* adjust 120px as per your row height */
	overflow-y: auto;
}

.recommended-symbol {
	color: #0000ff;
}

.required-symbol {
	color: #ff0000;
}

.has-value {
	color: #008000b5;
}

.empty-value {
	color: #303cd7c7;
}

.image-thumbnail {
	max-width: 150px;
	max-height: 120px;
	object-fit: cover;
}

.main-image-thumbnail {
	max-width: 200px;
	max-height: 150px;
	object-fit: cover;
}

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

	.product-data-block.border-end {
		border-right: none;
		padding-right: 0;
	}

	.product-data-block {
		border-right: none;
		padding-right: 0;
	}

	.responsive-list .header-row {
		display: none;
	}

	/* Ensure product items are flex containers so children can stretch */
	.product-item {
		display: flex;
		flex-wrap: nowrap;
		/* or allow wrap if needed */
		align-items: stretch;
	}

	.product-item>[class*="col-md-"] {
		display: flex !important;
		justify-content: space-between;
		width: 100% !important;
		padding: 0.5rem 0;
	}

	.product-item>[class*="col-md-"]::before {
		content: attr(data-label);
		font-weight: bold;
		flex: 0 0 45%;
		max-width: 45%;
	}

	.actions-col {
		text-align: left !important;
		margin-top: 1rem;
	}

	.nav-pills.nav-pills-no-bd li {
		margin-left: 0 !important;
	}
}

div#linnworkTable_info {
	white-space: normal !important;
	word-break: break-word;
}

.datatable-filter-select label {
	float: left !important;
}

.product-row {
	background: #f1eded;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin: 20px 0px !important;
	padding: 15px;
}

.form-button {
	display: inline;
}

.table td,
.table th {
	font-size: 1rem;
	border-top-width: 0;
	border-bottom: 1px solid;
	border-color: #dbdbdb !important;
	vertical-align: top !important;
}

.nav-pills.nav-pills-no-bd li .nav-link {
	color: #ffffff;
}

@media screen and (max-width: 600px) {
	.nav-pills.nav-pills-no-bd li {
		margin-left: 0 !important;
	}
}

@media (min-width: 576px) and (max-width: 1024px) {
	.custom-sm-md-pagination .pagination {
		justify-content: center !important;
		margin-top: 15px !important;
	}

	.custom-sm-md-label {
		padding-top: 0 !important;
	}
}


/* ===== CATEGORY MANAGEMENT LAYOUTS ===== */

/* ===== COMPACT CATEGORIES LAYOUT ===== */
.categories-card-container {
	position: relative;
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.02), rgba(118, 75, 162, 0.02));
	border-radius: 12px;
	padding: 15px;
	margin: 15px 0;
}

.categories-header-section {
	position: relative;
	padding: 10px 0;
	margin-bottom: 15px;
}

.categories-title-wrapper .categories-main-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #2c3e50;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.categories-subtitle {
	font-size: 0.85rem;
	color: #6c757d;
}

.stats-card {
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	padding: 12px 16px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	min-width: 100px;
}

.stats-number {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.stats-label {
	font-size: 0.75rem;
	opacity: 0.9;
	margin-top: 3px;
}

.categories-grid {
	position: relative;
}

.categories-grid::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -10px;
	right: -10px;
	bottom: -5px;
	background: linear-gradient(45deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
	border-radius: 15px;
	z-index: -1;
}

.category-card {
	background: #fff;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 1px solid rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.category-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.4s;
	z-index: 1;
}

.category-card:hover::before {
	left: 100%;
}

.category-card:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

.category-card-animated {
	opacity: 1;
	transform: translateY(0);
}

.category-card-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	position: relative;
	overflow: hidden;
	padding: 15px !important;
}

.category-card-header::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	transform: rotate(45deg);
	transition: all 0.3s ease;
}

.category-card:hover .category-card-header::before {
	right: -30%;
}

.category-number-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 12px;
	color: white;
	backdrop-filter: blur(10px);
}

.category-icon-wrapper {
	width: 45px;
	height: 45px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
}

.category-status-indicator .status-dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: all 0.3s ease;
}

.status-dot.amazon-active {
	background: linear-gradient(135deg, #ff9500, #ff6b00);
	color: white;
	animation: pulse 2s infinite;
}

.status-dot.inactive {
	background: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.7);
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.7);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(255, 149, 0, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(255, 149, 0, 0);
	}
}

.category-title {
	font-size: 1.1rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-top: 10px !important;
}

.category-card-body {
	background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%);
	padding: 15px !important;
}

.detail-item {
	padding: 6px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.detail-label {
	display: flex;
	align-items: center;
	margin-bottom: 3px;
}

.category-card-footer {
	padding: 12px 15px !important;
}

.action-buttons-grid .dropdown-menu {
	border: none;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	overflow: hidden;
}

.action-buttons-grid .dropdown-header {
	padding: 8px 12px;
	margin: 0;
	font-weight: 600;
	letter-spacing: 0.3px;
	font-size: 0.85rem;
}

.action-buttons-grid .dropdown-item {
	padding: 8px 12px;
	transition: all 0.2s ease;
	border: none;
	font-size: 0.9rem;
}

.action-buttons-grid .dropdown-item:hover {
	background: linear-gradient(90deg, #f8f9fa, #e9ecef);
	transform: translateX(3px);
}

/* ===== SUBCATEGORIES LISTING LAYOUT ===== */


.subcategory-card {
	transition: all 0.25s ease-in-out;
	border-left: 4px solid transparent;
}

.subcategory-card:hover {
	transform: translateY(-4px);
	border-left-color: var(--bs-primary);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.subcategory-card h6 {
	font-size: 1rem;
}

.breadcrumb-item+.breadcrumb-item::before {
	content: "›";
}

.form-switch .form-check-input {
	width: 2.3em;
	height: 1.1em;
}

.btn-check:checked+label.btn {
	color: #fff !important;
}

.btn-outline-primary,
.btn-outline-danger {
	border-radius: 8px;

	display: flex;
	font-size: 12px !important;
	align-items: center;
	justify-content: center;
}

.ebay-mapping h6 {
	font-size: 0.8rem;
	letter-spacing: 0.3px;
}

.subcategory-actions {
	border-color: #e9ecef !important;
	/* subtle light gray line */
}


.subcategories-listing-container {
	position: relative;
	background: linear-gradient(135deg, rgba(23, 162, 184, 0.02), rgba(19, 132, 150, 0.02));
	border-radius: 25px;
	padding: 30px;
	margin: 30px 0;
}

.subcategories-header-section {
	position: relative;
	margin-bottom: 30px;
}

.subcategories-header-card {
	background: linear-gradient(135deg, #17a2b8, #138496) !important;
	position: relative;
	overflow: hidden;
}

.subcategories-header-card::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	transform: rotate(45deg);
	animation: shimmer 3s infinite;
}

@keyframes shimmer {
	0% {
		right: -50%;
	}

	50% {
		right: -30%;
	}

	100% {
		right: -50%;
	}
}

.subcategories-main-title {
	font-size: 1.6rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.subcategories-subtitle {
	font-size: 1rem;
}

.subcategories-stats-card {
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.subcategories-stats-number {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.subcategories-listing {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.subcategory-list-item {
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 12px;
	margin-bottom: 15px;
	padding: 20px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.subcategory-list-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, #17a2b8, #138496);
	transform: scaleY(0);
	transition: transform 0.3s ease;
}

.subcategory-list-item:hover::before {
	transform: scaleY(1);
}

.subcategory-list-item:hover {
	transform: translateX(8px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.subcategory-item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.subcategory-main-info {
	display: flex;
	align-items: center;
}

.subcategory-icon {
	width: 45px;
	height: 45px;
	background: linear-gradient(135deg, #17a2b8, #138496);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	margin-right: 15px;
}

.subcategory-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin-bottom: 15px;
}

.subcategory-detail-card {
	background: rgba(248, 249, 250, 0.5);
	border-radius: 8px;
	padding: 12px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.detail-card-header {
	display: flex;
	align-items: center;
	font-weight: 600;
	color: #495057;
	margin-bottom: 8px;
}

.ebay-mapping-card {
	background: rgba(0, 123, 255, 0.05);
	border: 1px solid rgba(0, 123, 255, 0.1);
	border-radius: 8px;
	padding: 15px;
	margin-top: 10px;
}

.subcategory-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 15px;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.order-item {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px;
	font-size: 12px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.order-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.order-header input[type="checkbox"] {
	vertical-align: middle;
}

.order-date {
	color: #555;
	font-weight: 500;
}

.order-details {
	list-style: none;
	padding: 0;
	margin: 0 0 16px 0;
}

.order-details li {
	margin-bottom: 6px;
	color: #333;
}

.order-details li b,
.order-details li strong {
	color: #555;
}

.shipping-info {
	margin-bottom: 16px;
}

.shipping-info div {
	margin-bottom: 6px;
}

.status span {
	display: inline-block;
	padding: 4px 10px;
	background: #ffc107;
	color: #212529;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	margin-bottom: 16px;
}

.actions a {
	display: inline-block;
	margin-right: 8px;
	margin-bottom: 8px;
	padding: 6px 14px;
	background-color: #17a2b8;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 11px;
}

.actions a:hover {
	background-color: #117a8b;
}

.shipment-form {
	background: #f8f9fa;
	padding: 16px;
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-top: 16px;
	font-size: 12px;
}

.shipment-form .form-label {
	font-weight: 500;
}

@media (max-width: 600px) {
	.order-item {
		padding: 12px;
	}

	.actions a {
		padding: 5px 10px;
		font-size: 10px;
	}
}

/* ===== ENHANCED HEADER STYLING ===== */
.bg-gradient-primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.nav-pills-custom .nav-link {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.8);
	margin-right: 8px;
	border-radius: 25px;
	padding: 8px 16px;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
}

.nav-pills-custom .nav-link:hover {
	background: rgba(255, 255, 255, 0.2);
	color: white;
	transform: translateY(-2px);
}

.nav-pills-custom .nav-link.active {
	background: rgba(255, 255, 255, 0.9);
	color: #558aff;
	font-weight: 600;
}

.header-icon-wrapper {
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(10px);
}

/* ===== EMPTY STATES ===== */
.empty-state-card,
.empty-listing-state {
	background: linear-gradient(135deg, #f8f9ff, #ffffff);
	border: 2px dashed #dee2e6;
	border-radius: 20px;
	transition: all 0.3s ease;
}

.empty-state-card:hover,
.empty-listing-state:hover {
	border-color: #667eea;
	background: linear-gradient(135deg, #f0f2ff, #ffffff);
}

.empty-state-icon,
.empty-listing-icon {
	animation: bounce 2s infinite;
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-10px);
	}

	60% {
		transform: translateY(-5px);
	}
}

/* ===== UTILITY ANIMATIONS ===== */

/* ===== Table UI Styling ===== */


/* Responsive Table with Horizontal Scroll */

.card-header .collapse-icon {
	transition: transform 0.3s ease;
}

.matrix_table .table-wrapper {
	max-height: 70vh;
	/* or whatever height you prefer */
	overflow-y: auto;
}

/* assuming .my-table-header is the header row you want fixed */
.my-table-header {
	position: sticky;
	top: 0;
	z-index: 10;
	/* ensure it sits above the rows */
	background: #fff;
	/* or your header background so content scrolls under */
}

.fix_top {
	position: sticky;
	top: 41px;
	z-index: 10;
	/* ensure it sits above the rows */
	background: #fff;
	/* or your header background so content scrolls under */
	box-shadow: 0 0 10px #e3e3e3;
}

.card-header .accordion-toggle[aria-expanded="true"]+.collapse-icon {
	transform: rotate(180deg);
}

.matrix_table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	margin-top: 1rem;


}

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

/* .matrix_table .my-table-cell{
  padding: 0;
} */

.matrix_table .my-table {
	width: max-content;
	/* ensures table can grow wider than container */
	min-width: 100%;
	/* ensures table takes full width if smaller */
}

.matrix_table .my-table-cell {
	white-space: nowrap;
	/* prevents cells from wrapping, so width requirement stays */
}

.form-control:disabled,
.form-control[readonly] {
	border-color: #202940 !important;
}

#importCategoryModal .modal-content,
#exportCategoryModal .modal-content {
	overflow-x: hidden;
	max-width: 100%;
}

#importCategoryModal .modal-body,
#exportCategoryModal .modal-body {
	overflow-y: auto;
	max-height: calc(100vh - 400px);
	overflow-x: hidden;
}

#importCategoryModal .form-check label,
#importCategoryModal .form-group label {
	white-space: inherit;
}

.group-content .group-row:last-child {
	border-bottom: 0 !important;
}

/* Base (desktop / wider screens) */
.my-table {
	display: table;
	width: 100%;
	border-collapse: collapse;
	/* if you want classical borders */
	/* optional: border: 1px solid #dee2e6; */
}

.my-table-header {
	display: table-header-group;
	background: #595959;
	color: white;
}

.my-table-body {
	display: table-row-group;
}

.my-table-row {
	display: table-row;
}

.my-table-cell {
	display: table-cell;
	padding: 0.75rem;
	border: 1px solid #dee2e6;
	vertical-align: middle;
}

/* Mark header cells if needed */
.header-cell {
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom-width: 1px;
	font-weight: 600;
	border-color: transparent;
}

/* By default (desktop): hide the mobile version */
.action-icons.settings-buttons-mobile {
	display: none;
}

.configurationTable .modal.show .modal-dialog {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 auto;
}

.configurationTable .my-table-cell:last-child,
.shippingBoxTable .my-table-cell:last-child,
.prodGrouping .my-table-cell:last-child,
.cronTable .my-table-cell:last-child {
	width: 200px;
}

.configurationTableNew .my-table-cell:first-child {
	width: 100px;
}

.bar-small {
	width: 40px;
	height: 20px;
	border-radius: 3px;
}

.bar-small .bar-fill {
	width: 70%;
	height: 100%;
}


.product-row .select-checkbox {
	transform: translateY(2px);
	width: 20px;
	height: 20px;
}

.barcode-area {
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	background-color: #f8f9fa;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
}

.barcode-content {

	gap: 1rem;
}

.barcode-img {
	height: 50px;
	width: auto;
	object-fit: contain;
}

.barcode-text {
	font-family: monospace;
	font-size: 1rem;
	color: #333;
	user-select: all;
}

.print-btn {
	font-size: 1.4rem;
	color: #495057;
	cursor: pointer;
}

.print-btn:hover {
	color: #558aff;
}

.print-btn {
	font-size: 1.4rem;
	color: #495057;
	cursor: pointer;
}

.print-btn:hover {
	color: #558aff;
}

.itemid-list {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.itemid-list li {
	display: flex;
	align-items: center;
	font-size: 0.9rem;
}

.itemid-list li .color-name {
	font-style: italic;
	margin-left: 0.4rem;
	color: #555;
}

.itemid-list li a.delete-btn {
	margin-left: 0.6rem;
	color: #dc3545;
	/* bootstrap danger color */
	text-decoration: none;
}

.itemid-list li a.delete-btn:hover {
	color: #a71d2a;
}


/* On small screens: hide the settings column, hide original settings-buttons, show mobile settings in actions cell */
@media (max-width: 576px) {
	.my-table-cell.settings-cell {
		display: none;
		/* hide the entire settings column on mobile */
	}

	.my-table-cell.settings-buttons {
		display: none;
		/* hide the original settings-buttons inside settings-cell */
	}

	.action-icons.settings-buttons-mobile {
		display: inline-flex;
		/* or flex, whatever suits your layout */
		margin-left: 0.5rem;
		/* spacing if needed */
	}
}


/* Responsive behavior: for smaller screens, stack rows */
@media (max-width: 768px) {
	.configurationTable .modal.show .modal-dialog {

		width: 95%;
	}

	.my-table,
	.my-table-header,
	.my-table-body,
	.my-table-row {
		display: block;
		width: 100%;
	}

	.my-table-header {
		/* hide or collapse header row if desired */
		display: none;
	}

	.my-table-row {
		margin-bottom: 1rem;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		overflow: hidden;
	}

	.my-table-cell {
		display: flex;
		/* flex: 1; optional depending on layout */
		padding: 0.5rem;
		border: none;
		border-bottom: 1px solid #dee2e6;
		position: relative;
	}

	.my-table-cell:last-child {
		border-bottom: none;
	}

	/* Use :before to label each cell with its header text */
	.my-table-cell:before {
		content: attr(data-label);
		flex: 0 0 120px;
		/* width of label part */
		font-weight: 600;
		color: #555;
	}
}


.category-card,
.subcategory-list-item {
	animation: fadeInUp 0.6s ease-out;
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== BADGE ENHANCEMENTS ===== */
.badge {
	font-weight: 500;
	letter-spacing: 0.3px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 0;
}


.brr-7 {
	border-top-right-radius: 7px !important;
	border-bottom-right-radius: 7px !important;
}

/* ===== COMPACT DASHBOARD DESIGN - BLACK, BLUE, GRAY THEME ===== */

/* Dashboard Color Overrides */


.bg-secondary,
.btn-secondary,
.badge.bg-secondary {
	background-color: #6b7280 !important;
	border-color: #6b7280 !important;
}

.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary.active {
	color: #fff !important;
	background: #333333 !important;
	border-color: #333333 !important;
}

.bg-dark,
.btn-dark,
.badge.bg-dark {
	background-color: #1f2937 !important;
	border-color: #1f2937 !important;
}

.bg-black,
.btn-black,
.badge.bg-black,
.table-head-bg-black thead th {
	background-color: #333 !important;
	border-color: #333 !important;
	color: #ffffff !important;
}

.bg-dark,
.btn-dark,
.badge.bg-dark {
	background-color: #666666 !important;
	border-color: #666666 !important;
	color: #ffffff !important;
}

.bg-gray2 {
	background-color: #4b5563 !important;
	color: #ffffff !important;
}

:root,
[data-bs-theme=light] {
	--bs-primary: #558aff;
	--bs-primary-rgb: 85, 138, 255;
	--bs-link-color: #558aff;
	--bs-link-hover-color: #3d74f4;
	--bs-dark: #666666;
	--bs-dark-rgb: 102, 102, 102;
	--bs-black: #595959;
}

html {
	accent-color: #558aff;
}

::selection {
	background: #558aff;
	color: #fff;
}


.text-dark,
.text-body-emphasis {
	color: #666666 !important;
}

.text-black {
	color: #595959 !important;
}

.bg-dark {
	background-color: #666666 !important;
}

.bg-black,
.table-head-bg-black thead th {
	background-color: #595959 !important;
}


.btn-dark,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
	background-color: #666666 !important;
	border-color: #666666 !important;
}

.btn-black,
.btn-black:hover,
.btn-black:focus,
.btn-black:active {
	background-color: #333333 !important;
	border-color: #333333 !important;
}

.btn-check:checked+.btn {
	color: #ffffff !important;
} 

.btn-primary:focus,
.btn-primary:focus-visible {
	box-shadow: 0 0 0 .25rem rgba(85, 138, 255, .35) !important;
}

.form-check-input:checked {
	background-color: #558aff !important;
	border-color: #558aff !important;
}

.form-check-input:focus {
	box-shadow: 0 0 0 .25rem rgba(85, 138, 255, .25) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	background-color: #558aff !important;
}

.page-item.active .page-link {
	background-color: #558aff !important;
	border-color: #558aff !important;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: #558aff !important;
}

.list-group-item.active {
	background-color: #558aff !important;
	border-color: #558aff !important;
}

.border-dark {
	border-color: #666666 !important;
}

.card-primary {
	background: #558aff !important;
}

.card-dark {
	background: #666666 !important;
}

.card-black {
	background: #595959 !important;
}

/* Outline + border utilities */
.border-primary {
	border-color: #558aff !important;
}

.btn-outline-primary {
	color: #558aff !important;
	border-color: #558aff !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	background-color: #558aff !important;
	border-color: #558aff !important;
	color: #fff !important;
}

.btn-outline-dark {
	color: #666666 !important;
	border-color: #666666 !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
	background-color: #666666 !important;
	border-color: #666666 !important;
	color: #fff !important;
}

.btn-outline-black {
	color: #595959 !important;
	border-color: #595959 !important;
}

.btn-outline-black:hover,
.btn-outline-black:focus,
.btn-outline-black:active {
	background-color: #595959 !important;
	border-color: #595959 !important;
	color: #fff !important;
}

.border-black {
	border-color: #595959 !important;
}

/* Comprehensive active state overrides: ensure Bootstrap patterns are covered */
/* Primary */
.btn-primary:hover,
.btn-primary:focus {
	background-color: #4f79f0 !important;
	border-color: #4f79f0 !important;
	color: #ffffff !important;
}

.btn-primary.active,
.btn-primary.show,
.btn-primary:active,
.btn-primary:first-child:active,
:not(.btn-check)+.btn.btn-primary:active {
	background-color: #3d74f4 !important;
	border-color: #3d74f4 !important;
	color: #ffffff !important;
}

/* Dark */
.btn-dark:hover,
.btn-dark:focus {
	background-color: #5e5e5e !important;
	border-color: #5e5e5e !important;
	color: #ffffff !important;
}

.btn-dark.active,
.btn-dark.show,
.btn-dark:active,
.btn-dark:first-child:active,
:not(.btn-check)+.btn.btn-dark:active {
	background-color: #3d74f4 !important;
	border-color: #3d74f4 !important;
	color: #ffffff !important;
}

/* Black */
.btn-black:hover,
.btn-black:focus {
	background-color: #000 !important;
	border-color: #000 !important;
	color: #ffffff !important;
}

.btn-black.active,
.btn-black.show,
.btn-black:active,
.btn-black:first-child:active,
:not(.btn-check)+.btn.btn-black:active {
	background-color: #000 !important;
	border-color: #000 !important;
	color: #ffffff !important;
}

/* Remove all other color backgrounds */
/* .bg-warning, .bg-success, .bg-info, .bg-danger {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
    color: #ffffff !important;
} */

/* .btn-warning, .btn-success, .btn-info, .btn-danger {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.badge.bg-warning, .badge.bg-success, .badge.bg-info, .badge.bg-danger {
    background-color: #6b7280 !important;
    color: #ffffff !important;
} */


/* Uniform option buttons */
.btn-option {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-option:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 🎨 Sober Gradient Palette */
.bg-soft-blue {
	background: linear-gradient(135deg, #3a7bd5, #0410a3);
	/* Blue */
}

.bg-soft-purple {
	background: linear-gradient(135deg, #7f7fd5, #5c5ca8);
	/* Purple */
}

.bg-soft-red {
	background: linear-gradient(135deg, #e96443, #c0392b);
	/* Red */
}

.bg-amazon {
	background: linear-gradient(135deg, #ff9900, #cc7a00);
	/* Amazon Orange */
}

.bg-edit {
	background: linear-gradient(135deg, #4a90e2, #357ABD);
	/* Blue */
}

.bg-import {
	background: linear-gradient(135deg, #7f7fd5, #5c5ca8);
	/* Purple */
}

.bg-images {
	background: linear-gradient(135deg, #43cea2, #239d18);
	/* Teal */
}

.bg-download {
	background: linear-gradient(135deg, #36d1dc, #5b86e5);
	/* Cyan → Blue */
}

.bg-print {
	background: linear-gradient(135deg, #ff9966, #ff5e62);
	/* Orange → Red */
}


.bg-soft-black {
	background: linear-gradient(135deg, #434343, #000000);
	/* dark gray → black */
}

.bg-soft-gray {
	background: linear-gradient(135deg, #757f9a, #3a3a52);
	/* soft gray */
}

/* Icon sizing */
.btn-option i {
	font-size: 1.2rem;
	line-height: 1;
	color: #fff;
}


.btn-130-size {
	min-width: 130px;
	/* Adjust width as needed */
	text-align: center;
}


.horizontal-accordion {
	display: flex;
	overflow-x: auto;
	gap: 1rem;
	scroll-behavior: smooth;
	flex-wrap: nowrap;
}

.accordion-item {
	flex: 0 0 5%;
	transition: all 0.4s ease;
	border-radius: 0.5rem;
	overflow: hidden;
}

.accordion-item.active {
	flex: 0 0 70%;
}

.accordion-header {
	background: #f8f9fa;
	cursor: pointer;
	padding: 0.75rem 1rem;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #dee2e6;
}

.accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: all 0.4s ease;
	padding: 0;
}

.accordion-item.active .accordion-body {
	max-height: 2000px;
	padding: 1rem;
	overflow-y: auto;
}

@media (max-width: 768px) {
	.horizontal-accordion {
		flex-direction: column;
	}

	.accordion-item {
		flex: 1 1 auto;
	}
}

.form-select[multiple] option {
	padding: 6px;
	margin: 2.5px;
	border-radius: 5px;
	font-size: 12px;
}

.error-required {
	border: 2px solid red !important;
}

/* .required-label::after {
	content: " *";
	color: red;
} */

/* Make both buttons the same fixed width */
/* ===== Product Matrix: Vertical Counter Strip & Status ===== */
.has-strip {
	padding-left: 48px;
}

/* Spacing, border, and reserved space so top-right controls don't overlap */
.list-group-item.has-strip {
	border: 1px solid #dbdbdb;
	border-radius: .5rem;
	margin-bottom: 15px;
	padding-top: 10px;
	padding-bottom: 40px;
	background-clip: padding-box;
}

.list-group-flush>.list-group-item:last-child {
	margin-bottom: 0;
}

.item-counter-strip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	transform: rotate(180deg);
	font-weight: 600;
	letter-spacing: .5px;
	border-top-left-radius: .5rem;
	border-bottom-left-radius: .5rem;
}

.item-counter-strip.bg-success,
.item-counter-strip.bg-danger {
	color: #fff !important;
}

.has-strip {
	position: relative;
}

/* Attribute-driven colors: single source of truth */
/* Legacy single attribute (data-status) still supported */
li.list-group-item.has-strip[data-status="active"] .item-counter-strip {
	background-color: var(--bs-success, #198754) !important;
	color: #fff !important;
}

li.list-group-item.has-strip[data-status="inactive"] .item-counter-strip {
	background-color: var(--bs-danger, #dc3545) !important;
	color: #fff !important;
}

li.list-group-item.has-strip[data-status="active"] {
	background-color: var(--bs-success-bg-subtle, #d1e7dd) !important;
}

li.list-group-item.has-strip[data-status="inactive"] {
	background-color: var(--bs-danger-bg-subtle, #f8d7da) !important;
}

li.list-group-item.has-strip[data-status="active"] .status-badge {
	background-color: var(--bs-success, #198754) !important;
}

li.list-group-item.has-strip[data-status="inactive"] .status-badge {
	background-color: var(--bs-danger, #dc3545) !important;
}

/* New: decouple strip vs row with data-strip and data-row */
li.list-group-item.has-strip[data-strip="active"] .item-counter-strip {
	background-color: var(--bs-success, #198754) !important;
	color: #fff !important;
}

li.list-group-item.has-strip[data-strip="inactive"] .item-counter-strip {
	background-color: var(--bs-danger, #dc3545) !important;
	color: #fff !important;
}

/* default strip state: no bg override */

li.list-group-item.has-strip[data-row="active"] {
	background-color: var(--bs-success-bg-subtle, #d1e7dd) !important;
}

li.list-group-item.has-strip[data-row="inactive"] {
	background-color: var(--bs-danger-bg-subtle, #f8d7da) !important;
}

/* default row state: keep default bg */

/* Badge color follows row status */
li.list-group-item.has-strip[data-row="active"] .status-badge {
	background-color: var(--bs-success, #198754) !important;
	color: #fff !important;
}

li.list-group-item.has-strip[data-row="inactive"] .status-badge {
	background-color: var(--bs-danger, #dc3545) !important;
	color: #fff !important;
}

/* Top-right status + actions */
.li-status-controls {
	position: absolute;
	bottom: .5rem;
	right: .75rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	z-index: 1;
}

.li-status-controls .status-badge {
	font-size: .75rem;
}

.li-status-controls .form-select {
	min-width: 110px;
}

.li-status-controls .btn {
	width: 50px;
	height: 33px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.bg-success-soft {
	background-color: var(--bs-success-bg-subtle, #d1e7dd) !important;
}

.list-group-item.bg-danger-soft {
	background-color: var(--bs-danger-bg-subtle, #f8d7da) !important;
}

.item-counter-strip,
.status-badge {
	transition: background-color .2s ease, color .2s ease;
}

.status-badge {
	min-width: 70px;
}


/* Scoped to just “Select All” using the custom class */
.custom-select-all-check .form-check-input {
	accent-color: #558aff;
	/* change to your brand/primary colour */
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
}

.custom-select-all-check .form-check-input:checked+.form-check-label {
	color: #558aff;
	/* same primary colour for label when checked */
}

.custom-select-all-check .form-check-input:hover {
	cursor: pointer;
}

/* Optional: change the checkbox border, background-hover etc */
.custom-select-all-check .form-check-input:not(:checked) {
	border: 1px solid #6c757d;
	background-color: #ffffff;
}

.custom-select-all-check .form-check-input:focus {
	box-shadow: 0 0 0 0.25rem rgba(85, 138, 255, 0.25);
}


.custom-90 {
	max-width: 90%;
}

#attributeRows {
	max-height: 500px;
	overflow-y: auto;
}


.row-item {
	border-bottom: 1px solid #dee2e6;
	/* light bottom border */
	padding: 1rem 0;
}

@media (max-width: 576px) {
	.has-strip {
		padding-left: 44px;
	}

	.item-counter-strip {
		width: 32px;
	}

	.list-group-item.has-strip {
		padding-top: 56px;
		padding-right: 120px;
	}
}

.btn-fixed,
.btn-100-size {
	width: 100px;
	/* adjust as needed */
}

/* Optional: ensure text wrapping doesn’t push button too far down on narrow widths */
@media (max-width: 576px) {

	.card,
	.card-light {
		margin-bottom: 10px;
	}

	.btn-fixed {
		width: 100px;
		font-size: 0.875rem;
	}
}

/* Compact Dashboard Cards */
.dashboard-card {
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	margin-bottom: 15px !important;
}

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

.dashboard-card .card-header {
	padding: 12px 15px !important;
	border-radius: 12px 12px 0 0 !important;
}

/* Compact Statistics Cards */
.stats-card-compact {
	padding: 15px !important;
	border-radius: 10px !important;
	text-align: center;
	transition: transform 0.2s ease;
}

.stats-card-compact:hover {
	transform: translateY(-2px);
}

.stats-card-compact i {
	font-size: 2rem !important;
	margin-bottom: 8px !important;
}

.stats-card-compact h3 {
	font-size: 1.5rem !important;
	margin-bottom: 5px !important;
}

.stats-card-compact p {
	font-size: 0.9rem !important;
	margin-bottom: 2px !important;
}

.stats-card-compact small {
	font-size: 0.75rem !important;
}

/* Compact Alert Boxes */
.alert-compact {
	padding: 10px 12px !important;
	margin-bottom: 10px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.alert-compact .btn {
	padding: 4px 8px !important;
	font-size: 0.8rem !important;
}

/* Compact Top Products Section */
.top-products-item {
	padding: 12px 15px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.top-products-item:last-child {
	border-bottom: none !important;
}

.product-rank-badge {
	width: 35px !important;
	height: 35px !important;
	font-size: 0.7rem !important;
}

.product-stats-box {
	padding: 8px 10px !important;
	border-radius: 6px !important;
	background-color: rgba(107, 114, 128, 0.1) !important;
}

/* Compact Accordion */
.accordion-compact .card {
	margin-bottom: 8px !important;
}

.accordion-compact .card-header {
	padding: 10px 15px !important;
}

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

/* Responsive Grid Adjustments */
.dashboard-grid {
	gap: 15px !important;
}

#top-alert-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1050;
	width: 40%;
}

.main-content {
	/* adjust this based on total alert height, e.g. if you have two alerts each ~60px tall */
	margin-top: 120px;
}

/* Welcome Header Compact */
.welcome-header {
	padding: 15px !important;
	margin-bottom: 20px !important;
}

.welcome-header img {
	width: 60px !important;
	height: 60px !important;
}

.welcome-header h2 {
	font-size: 1.3rem !important;
	margin-bottom: 5px !important;
}

/* Date Filter Compact */
.date-filter-compact {
	padding: 12px 15px !important;
}

.date-filter-compact .form-control {
	padding: 6px 10px !important;
	font-size: 0.9rem !important;
}

.date-filter-compact .btn {
	padding: 6px 12px !important;
	font-size: 0.9rem !important;
}

/* Chart Container Compact */
.chart-container-compact {
	padding: 15px !important;
}

.chart-container-compact .card-header {
	padding: 10px 15px !important;
}

/* List Group Compact */
.list-group-compact .list-group-item {
	padding: 8px 12px !important;
	font-size: 0.9rem !important;
}

.list-group-compact .badge {
	font-size: 0.75rem !important;
	padding: 3px 8px !important;
}

/* Modal Compact */
.modal-compact .modal-header {
	padding: 12px 15px !important;
}

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

.modal-compact .modal-footer {
	padding: 10px 15px !important;
}

/* Table Compact */
.table-compact {
	font-size: 0.9rem !important;
}

.table-compact th,
.table-compact td {
	padding: 8px 10px !important;
}

/* ===== PRODUCT ROW RESPONSIVE DESIGN ===== */

.price-increment .btn-check:checked+.btn {
	color: #ffffff !important;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
	background-color: #3d74f4;
}

.price-increment .btn-check+.btn {
	color: #474747;
}


/* Base product row styling */

#childrenVariation .product-row {
	background: #ffffff;
}

#childrenAccordion.accordion .card .card-body {
	padding: 12px 15px !important;
}

.product-row {
	background: #f1f1f1;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin: 15px 0 !important;
	padding: 12px 15px;
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-row.parent-w-child {
	padding: 0;
}

.acc_child #childrenAccordion {
	border-top: 1px solid #21252933;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	overflow: hidden;
}

.acc_child .accordion .card .card-body {
	padding: 15px;
}

.acc_child .accordion .card .card-body .product-row {
	border: 1px solid #d1d1d1 !important;
}

.product-row.product-parent {
	background: #f1f1f1;
	border: 0;
	box-shadow: none;
}

.product-row.product-parent .card-header {
	background: #e5e5e5 !important;
	border: 0;
	box-shadow: none;
}

.product-row:hover {
	background-color: #fcfcfc;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.qty_block .badge {
	text-align: center;
	vertical-align: middle;
	padding: 2px 5px;
	font-size: 11px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Product image responsive sizing */
.product-row .product-image img {
	max-width: 90px;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
	background-color: #fff;
}

.custom-bl {
	border-left: 1px solid rgba(33, 37, 41, 0.2);
}

.custom-br {
	border-right: 1px solid rgba(33, 37, 41, 0.2);
}

.product-card {
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
	overflow: hidden;
}

.product-heading {
	font-size: .95rem;
}

.small-meta {
	font-size: .85rem;
	color: #555;
}

.barcode {
	max-height: 50px;
}

.vh-auto {
	height: auto !important;
	width: 180px !important;
}

.wh-auto {
	width: auto !important;
	height: 65px !important;
}

.color-badges .badge {
	font-size: .75rem;
	margin-right: .25rem;
}

.synchronized-row {
	border-top: 1px dashed #ccc;
}

.status-icon {
	font-size: .9rem;
}

.tab-link {
	display: block;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	color: #6c757d;
	/* Bootstrap's text-muted color */
	border: 1px solid transparent;
	border-radius: 0.375rem;
	position: relative;
	transition: color 0.3s, border-color 0.3s;
}

.tab-link:hover {
	color: #ffffff;
	background-color: #6b7280;
	/* Softer gray on hover */
}

.tab-link.active {
	color: #ffffff;
	background-color: #595959;
	/* Softer mid-gray for active tab */
	border-color: #ffffff;
	/* White border for active tab */
}

.tab-link.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #ffffff;
	/* White underline for active tab */
	transition: width 0.3s ease-in-out;
}

.nav-pills.nav_tabs>li>.nav-link {
	border-color: #595959;
}

.nav-pills.nav_tabs>li>.nav-link.active {
	background-color: #595959;
}


.platform-group {
	background: #f8f9fa;
	border-radius: 12px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease-in-out;
}

.platform-group:hover {
	background: #eef2f6;
	transform: translateY(-2px);
}

.platform-icon {
	background: #e9ecef;
	border-radius: 8px;
	padding: 6px 10px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
}

.platform-input {
	flex: 1;
	min-width: 80px;
}

.platform-btn {
	border-radius: 8px;
}

.filter-row {
	flex-wrap: wrap;
	gap: 10px;
}


@media (max-width: 768px) {

	.product-card .col-md-2,
	.product-card .col-md-3 {
		margin-bottom: 1rem;
	}
}


/* Responsive breakpoints */
@media (max-width: 1200px) {
	.product-row {
		padding: 12px;
	}

	.product-row img {
		max-width: 100px;
	}
}

@media (max-width: 992px) {

	.table_ui .row>div {
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}


	.product-row {
		padding: 12px;
	}

	.product-row .col-md-6,
	.product-row .col-md-4,
	.product-row .col-md-3,
	.product-row .col-md-2 {
		margin-bottom: 15px;
	}

	.product-row img {
		max-width: 80px;
	}

	.product-row h5 {
		font-size: 1rem;
		line-height: 1.3;
	}

	.subcategory-details-grid {
		grid-template-columns: 1fr;
	}

	.subcategory-actions {
		flex-direction: column;
		gap: 10px;
	}

	.dashboard-grid {
		gap: 10px !important;
	}

	.stats-card-compact {
		padding: 12px !important;
	}

	.stats-card-compact i {
		font-size: 1.5rem !important;
	}

	.stats-card-compact h3 {
		font-size: 1.3rem !important;
	}
}

@media (max-width: 768px) {
	.product-row {
		padding: 10px;
		margin: 10px 0 !important;
	}

	/* Stack all columns vertically on mobile */
	.product-row .row {
		flex-direction: column;
	}

	.product-row .col-md-6,
	.product-row .col-md-4,
	.product-row .col-md-3,
	.product-row .col-md-2 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-bottom: 20px;
		padding: 0 5px;
	}

	/* Mobile product image and title layout */
	.product-row .d-flex.flex-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
	}

	.product-row img {
		max-width: 100%;
		width: 100%;
		max-height: 200px;
		margin-bottom: 10px;
	}

	.product-row h5 {
		font-size: 0.95rem;
		margin-bottom: 10px;
	}

	/* Mobile quantity section */
	.product-row .p-2 {
		padding: 8px !important;
	}

	/* Mobile sync status badges */
	.product-row .badge {
		font-size: 0.75rem;
		margin-bottom: 5px;
		display: block;
		text-align: center;
	}

	/* Mobile action buttons */
	.product-options-buttons {
		justify-content: center !important;
		flex-wrap: wrap;
		gap: 8px !important;
	}

	.product-options-buttons .btn {
		margin: 2px;
		min-width: 40px;
	}

	/* Mobile section headers */
	.product-row .fw-semibold,
	.product-row strong {
		font-size: 0.9rem;
		margin-bottom: 2px;
		display: block;
		color: #333;
		border-bottom: 1px solid #ddd;
		padding-bottom: 2px;
	}

	/* Mobile progress circles */
	.circle-progress-wrapper {
		margin: 10px auto !important;
		display: block !important;
	}

	/* Mobile category info */
	.product-row .d-flex.justify-content-between {
		flex-direction: row !important;
		gap: 10px !important;
	}

	.category-card-header {
		padding: 20px !important;
	}

	.category-number-badge {
		width: 30px;
		height: 30px;
		font-size: 12px;
	}

	.category-icon-wrapper {
		width: 50px;
		height: 50px;
	}

	.category-title {
		font-size: 1.1rem;
	}

	.subcategory-item-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.subcategory-main-info {
		width: 100%;
	}

	.welcome-header {
		text-align: center !important;
	}

	.welcome-header .d-flex {
		flex-direction: column !important;
		gap: 15px !important;
	}

	.top-products-item .row {
		text-align: center !important;
	}

	.top-products-item .col-lg-3 {
		margin-top: 10px !important;
	}

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

	.stats-card-compact {
		padding: 10px !important;
	}

	.stats-card-compact i {
		font-size: 1.3rem !important;
	}

	.stats-card-compact h3 {
		font-size: 1.2rem !important;
	}
}

@media (max-width: 576px) {
	.product-row {
		padding: 8px;
		margin: 8px 0 !important;
		border-radius: 8px;
	}

	.product-row h5 {
		font-size: 0.9rem;
		line-height: 1.2;
	}

	.product-row img {
		max-height: 150px;
		object-fit: contain;
		object-position: center;
	}

	/* Extra small mobile adjustments */
	.product-options-buttons .btn {
		min-width: 35px;
		height: 35px;
		font-size: 0.8rem;
	}

	.badge {
		font-size: 0.7rem;
		padding: 3px 6px;
	}


	.stats-card-compact h3 {
		font-size: 1.1rem !important;
	}
}

/* ===== ADDITIONAL RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {

	.circle-label {

		border: 0 !important;
		transform: translate(60%, 90%) !important;
		left: 0 !important;
		top: 0 !important;

	}

	.category-card-header {
		padding: 20px !important;
	}

	.category-number-badge {
		width: 30px;
		height: 30px;
		font-size: 12px;
	}

	.category-icon-wrapper {
		width: 50px;
		height: 50px;
	}

	.category-title {
		font-size: 1.1rem;
	}

	.subcategory-item-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.subcategory-main-info {
		width: 100%;
	}

	.welcome-header {
		text-align: center !important;
	}

	.welcome-header .d-flex {
		flex-direction: column !important;
		gap: 15px !important;
	}

	.top-products-item .row {
		text-align: center !important;
	}

	.top-products-item .col-lg-3 {
		margin-top: 10px !important;
	}

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

	.stats-card-compact {
		padding: 10px !important;
	}

	.stats-card-compact i {
		font-size: 1.3rem !important;
	}

	.stats-card-compact h3 {
		font-size: 1.1rem !important;
	}
}

@media (max-width: 576px) {
	.container-fluid {
		padding: 10px !important;
	}

	.dashboard-grid {
		gap: 8px !important;
	}

	.dashboard-card {
		margin-bottom: 10px !important;
	}

	.alert-compact {
		padding: 8px 10px !important;
	}

	.top-products-item {
		padding: 10px 12px !important;
	}

	.date-filter-compact .col-md-4 {
		margin-bottom: 10px !important;
	}
}

/* Button color overrides */

.btn-icon {
	width: 34px;
	height: 34px;
}

.btn i {
	font-size: 13px;
}

.btn {
	padding: 8px 10px;
}

.bg-primary,
.badge-primary,
.label-primary {
	background-color: #4976e7 !important;
}

.text-primary {
	color: #4976e7 !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
	color: #ffffff !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #4976e7 !important;
	background-image: -moz-linear-gradient(top, #4986e7, #495fe7) !important;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4986e7), to(#495fe7)) !important;
	background-image: -webkit-linear-gradient(top, #4986e7, #495fe7) !important;
	background-image: -o-linear-gradient(top, #4986e7, #495fe7) !important;
	background-image: linear-gradient(to bottom, #4986e7, #495fe7) !important;
	background-repeat: repeat-x !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4986e7', endColorstr='#ff495fe7', GradientType=0);
	border-color: #495fe7 #495fe7 #1b32c9 !important;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.bg-danger,
.badge-danger,
.label-danger {
	background-color: #e75949 !important;
}

.text-danger {
	color: #e75949 !important;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.show>.btn-danger.dropdown-toggle {
	color: #ffffff !important;
	background-color: #e75949 !important;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e74949), to(#e77149)) !important;
	background-image: -webkit-linear-gradient(top, #e74949, #e77149) !important;
	background-image: -o-linear-gradient(top, #e74949, #e77149) !important;
	background-image: linear-gradient(to bottom, #e74949, #e77149) !important;
	background-repeat: repeat-x !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74949', endColorstr='#ffe77149', GradientType=0);
	border-color: #e77149 #e77149 #c9461b !important;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.bg-success,
.badge-success,
.label-success {
	background-color: #5f8a1d !important;
}

.text-success {
	color: #5f8a1d !important;
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.show>.btn-success.dropdown-toggle {
	color: #ffffff !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5f8a1d !important;
	background-image: -moz-linear-gradient(top, #6b9b20, #4e7117) !important;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6b9b20), to(#4e7117)) !important;
	background-image: -webkit-linear-gradient(top, #6b9b20, #4e7117) !important;
	background-image: -o-linear-gradient(top, #6b9b20, #4e7117) !important;
	background-image: linear-gradient(to bottom, #6b9b20, #4e7117) !important;
	background-repeat: repeat-x !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6b9b20', endColorstr='#ff4e7117', GradientType=0);
	border-color: #4e7117 #4e7117 #22310a !important;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.bg-warning,
.badge-warning,
.label-warning {
	background-color: #faa732 !important;
}

.text-warning {
	color: #faa732 !important;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.show>.btn-warning.dropdown-toggle {
	color: #ffffff !important;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732 !important;
	background-image: -moz-linear-gradient(top, #fbb450, #f89406) !important;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)) !important;
	background-image: -webkit-linear-gradient(top, #fbb450, #f89406) !important;
	background-image: -o-linear-gradient(top, #fbb450, #f89406) !important;
	background-image: linear-gradient(to bottom, #fbb450, #f89406) !important;
	background-repeat: repeat-x !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
	border-color: #f89406 #f89406 #ad6704 !important;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}


.label,
.badge {

	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}