/* ==========================================================================
   B2B Reseller Manager — Modern SaaS Frontend Reseller Portal Stylesheet
   ========================================================================== */

:root {
	--b2b-primary: #2563eb;
	--b2b-primary-hover: #1d4ed8;
	--b2b-primary-light: #eff6ff;
	--b2b-primary-dark: #1e40af;
	--b2b-primary-glow: rgba(37, 99, 235, 0.15);

	--b2b-success: #10b981;
	--b2b-success-light: #ecfdf5;
	--b2b-success-border: #a7f3d0;
	--b2b-success-dark: #047857;

	--b2b-warning: #f59e0b;
	--b2b-warning-light: #fffbeb;
	--b2b-warning-border: #fde68a;
	--b2b-warning-dark: #b45309;

	--b2b-danger: #ef4444;
	--b2b-danger-light: #fef2f2;
	--b2b-danger-border: #fecaca;
	--b2b-danger-dark: #b91c1c;

	--b2b-info: #0ea5e9;
	--b2b-info-light: #f0f9ff;
	--b2b-info-border: #bae6fd;
	--b2b-info-dark: #0369a1;

	--b2b-purple: #8b5cf6;
	--b2b-purple-light: #f5f3ff;
	--b2b-purple-dark: #6d28d9;

	/* Neutrals */
	--b2b-bg-page: #f8fafc;
	--b2b-bg-card: #ffffff;
	--b2b-bg-hover: #f1f5f9;
	--b2b-border: #e2e8f0;
	--b2b-border-subtle: #f1f5f9;

	--b2b-text-main: #0f172a;
	--b2b-text-muted: #64748b;
	--b2b-text-subtle: #94a3b8;
	--b2b-text-white: #ffffff;

	/* Shadows */
	--b2b-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--b2b-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--b2b-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
	--b2b-shadow-hover: 0 12px 20px -3px rgba(79, 70, 229, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);

	/* Radii */
	--b2b-radius-sm: 6px;
	--b2b-radius-md: 10px;
	--b2b-radius-lg: 14px;
	--b2b-radius-full: 9999px;
}

/* --- Dashboard Wrapper Shell --- */
.b2b-dashboard-wrapper {
	display: flex;
	background: var(--b2b-bg-page);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-lg);
	overflow: hidden;
	min-height: 750px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
	color: var(--b2b-text-main);
	box-shadow: var(--b2b-shadow-md);
	position: relative;
	box-sizing: border-box;
}

.b2b-dashboard-wrapper *,
.b2b-dashboard-wrapper *::before,
.b2b-dashboard-wrapper *::after {
	box-sizing: border-box;
}

/* --- Compact SaaS Sidebar --- */
.b2b-sidebar {
	width: 240px;
	background: var(--b2b-bg-card);
	border-right: 1px solid var(--b2b-border);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	transition: all 0.25s ease;
	z-index: 50;
}

.b2b-sidebar-header {
	padding: 24px 20px;
	border-bottom: 1px solid var(--b2b-border-subtle);
	display: flex;
	align-items: center;
	gap: 12px;
}

.b2b-sidebar-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--b2b-primary);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.b2b-sidebar-user-meta {
	overflow: hidden;
}

.b2b-sidebar-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--b2b-text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.b2b-sidebar-role {
	font-size: 11px;
	font-weight: 600;
	color: var(--b2b-primary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.b2b-sidebar-nav {
	flex: 1;
	padding: 14px 10px;
	overflow-y: auto;
}

.b2b-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.b2b-menu li {
	margin: 0;
}

.b2b-menu li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: var(--b2b-text-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--b2b-radius-md);
	transition: all 0.15s ease;
}

.b2b-menu li a:hover {
	background: var(--b2b-bg-hover);
	color: var(--b2b-text-main);
}

.b2b-menu li a.active {
	background: var(--b2b-primary-light);
	color: var(--b2b-primary);
	font-weight: 600;
}

.b2b-menu li a svg {
	width: 18px;
	height: 18px;
	stroke-width: 2;
	flex-shrink: 0;
}

.b2b-sidebar-footer {
	padding: 14px 10px;
	border-top: 1px solid var(--b2b-border-subtle);
}

.b2b-logout-link {
	color: var(--b2b-danger) !important;
}

.b2b-logout-link:hover {
	background: var(--b2b-danger-light) !important;
}

/* --- Main Dashboard Viewport --- */
.b2b-main {
	flex: 1;
	background: var(--b2b-bg-page);
	padding: 24px 30px;
	min-width: 0; /* Prevents overflow */
	display: flex;
	flex-direction: column;
}

/* --- Reseller Top Header --- */
.b2b-portal-top-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.b2b-portal-header-left {
	display: flex;
	flex-direction: column;
}

.b2b-portal-greeting {
	font-size: 22px;
	font-weight: 800;
	color: var(--b2b-text-main);
	letter-spacing: -0.02em;
	margin: 0 0 2px;
}

.b2b-portal-subtitle {
	font-size: 13px;
	color: var(--b2b-text-muted);
}

.b2b-portal-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Unified Quick Action POS & Create Order Button (Matches #b2b_payout_submit_btn Design) */
.b2b-btn-pos-header,
.b2b-btn-create-order,
.b2b-dashboard-wrapper .b2b-btn-pos-header,
.b2b-dashboard-wrapper .b2b-btn-create-order,
a.b2b-btn-pos-header,
button.b2b-btn-pos-header {
	background-color: #2563eb !important;
	background: #2563eb !important;
	color: #ffffff !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em !important;
	height: 42px !important;
	padding: 0 20px !important;
	border: none !important;
	border-radius: 14px !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
	user-select: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	-webkit-appearance: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-btn-pos-header *,
.b2b-btn-pos-header span,
.b2b-btn-create-order *,
.b2b-btn-create-order span,
.b2b-dashboard-wrapper .b2b-btn-pos-header *,
.b2b-dashboard-wrapper .b2b-btn-pos-header span,
.b2b-dashboard-wrapper .b2b-btn-create-order *,
.b2b-dashboard-wrapper .b2b-btn-create-order span {
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.b2b-btn-pos-header svg,
.b2b-btn-create-order svg,
.b2b-dashboard-wrapper .b2b-btn-pos-header svg,
.b2b-dashboard-wrapper .b2b-btn-create-order svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
	fill: none !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

.b2b-btn-pos-header:hover,
.b2b-btn-create-order:hover,
.b2b-dashboard-wrapper .b2b-btn-pos-header:hover,
.b2b-dashboard-wrapper .b2b-btn-create-order:hover,
a.b2b-btn-pos-header:hover,
button.b2b-btn-pos-header:hover {
	background-color: #1d4ed8 !important;
	background: #1d4ed8 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

.b2b-btn-pos-header:hover *,
.b2b-btn-create-order:hover *,
.b2b-dashboard-wrapper .b2b-btn-pos-header:hover *,
.b2b-dashboard-wrapper .b2b-btn-create-order:hover * {
	color: #ffffff !important;
}

.b2b-btn-pos-header:focus-visible,
.b2b-btn-create-order:focus-visible,
.b2b-dashboard-wrapper .b2b-btn-pos-header:focus-visible,
.b2b-dashboard-wrapper .b2b-btn-create-order:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px !important;
}

.b2b-btn-pos-header:active,
.b2b-btn-create-order:active,
.b2b-dashboard-wrapper .b2b-btn-pos-header:active,
.b2b-dashboard-wrapper .b2b-btn-create-order:active {
	transform: translateY(1px) !important;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

.b2b-btn-pos-header:disabled,
.b2b-btn-pos-header[disabled],
.b2b-btn-create-order:disabled,
.b2b-btn-create-order[disabled],
.b2b-dashboard-wrapper .b2b-btn-pos-header:disabled,
.b2b-dashboard-wrapper .b2b-btn-pos-header[disabled],
.b2b-dashboard-wrapper .b2b-btn-create-order:disabled,
.b2b-dashboard-wrapper .b2b-btn-create-order[disabled] {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	box-shadow: none !important;
	transform: none !important;
}

@media (max-width: 480px) {
	.b2b-btn-pos-header,
	.b2b-btn-create-order,
	.b2b-dashboard-wrapper .b2b-btn-pos-header,
	.b2b-dashboard-wrapper .b2b-btn-create-order {
		height: 38px !important;
		padding: 0 16px !important;
		font-size: 13px !important;
		gap: 6px !important;
		border-radius: 8px !important;
	}
}

/* --- KPI Cards Grid --- */
.b2b-cards-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 1500px) {
	.b2b-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
	.b2b-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.b2b-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.b2b-cards-grid { grid-template-columns: 1fr; }
}

.b2b-card {
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-lg);
	padding: 20px;
	box-shadow: var(--b2b-shadow-sm);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	overflow: hidden;
}

.b2b-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--b2b-shadow-md);
}

.b2b-card-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.b2b-card h4 {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--b2b-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.b2b-card .b2b-card-value {
	font-size: 26px;
	font-weight: 800;
	color: var(--b2b-text-main);
	line-height: 1.15;
	letter-spacing: -0.02em;
	word-break: break-word;
	margin-bottom: 6px;
}

.b2b-card-sub {
	font-size: 12px;
	color: var(--b2b-text-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Status Icon Modifiers */
.b2b-kpi-icon.icon-orange { background: rgba(249, 115, 22, 0.12) !important; color: #f97316 !important; }
.b2b-kpi-icon.icon-blue { background: rgba(59, 130, 246, 0.12) !important; color: #3b82f6 !important; }
.b2b-kpi-icon.icon-yellow { background: rgba(234, 179, 8, 0.14) !important; color: #eab308 !important; }
.b2b-kpi-icon.icon-green { background: rgba(16, 185, 129, 0.12) !important; color: #10b981 !important; }
.b2b-kpi-icon.icon-red { background: rgba(239, 68, 68, 0.12) !important; color: #ef4444 !important; }
.b2b-kpi-icon.icon-gray { background: rgba(100, 116, 139, 0.12) !important; color: #64748b !important; }
.b2b-kpi-icon.icon-darkred { background: rgba(153, 27, 27, 0.14) !important; color: #991b1b !important; }
.b2b-kpi-icon.icon-emerald { background: var(--b2b-success-light) !important; color: var(--b2b-success) !important; }
.b2b-kpi-icon.icon-amber { background: var(--b2b-warning-light) !important; color: var(--b2b-warning-dark) !important; }
.b2b-kpi-icon.icon-sky { background: var(--b2b-info-light) !important; color: var(--b2b-info) !important; }
.b2b-kpi-icon.icon-purple { background: var(--b2b-purple-light) !important; color: var(--b2b-purple) !important; }

/* --- WooCommerce Order Status Overview Section --- */
.b2b-status-overview-section {
	margin-bottom: 24px;
}

.b2b-status-overview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.b2b-status-overview-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--b2b-text-main);
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.b2b-status-live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--b2b-success);
	background: var(--b2b-success-light);
	padding: 3px 10px;
	border-radius: var(--b2b-radius-full);
}

.b2b-status-live-dot {
	width: 7px;
	height: 7px;
	background: var(--b2b-success);
	border-radius: 50%;
	display: inline-block;
	animation: b2bPulse 2s infinite ease-in-out;
}

.b2b-order-status-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 14px;
}

@media (max-width: 1600px) {
	.b2b-order-status-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1200px) {
	.b2b-order-status-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.b2b-order-status-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.b2b-order-status-grid { grid-template-columns: 1fr; }
}

.b2b-status-card {
	cursor: default;
}

.b2b-card-highlight-pulse {
	animation: b2bCardPulse 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Layout Grids --- */
.b2b-grid-2col {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

.b2b-grid-equal-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 1050px) {
	.b2b-grid-2col,
	.b2b-grid-equal-2col {
		grid-template-columns: 1fr;
	}
}

/* --- Reusable SaaS Cards --- */
.b2b-saas-card {
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.b2b-saas-card-header {
	padding: 18px 22px;
	border-bottom: 1px solid var(--b2b-border-subtle);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.b2b-saas-card-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--b2b-text-main);
	display: flex;
	align-items: center;
	gap: 8px;
}

.b2b-saas-card-body {
	padding: 22px;
	flex: 1;
}

.b2b-saas-card-body.no-padding {
	padding: 0;
}

/* --- Charts --- */
.b2b-chart-container {
	position: relative;
	width: 100%;
	height: 300px;
}

.b2b-chart-date-filter {
	display: flex;
	align-items: center;
	background: var(--b2b-bg-page);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-md);
	padding: 2px;
	gap: 2px;
}

.b2b-reseller-date-btn {
	background: transparent;
	border: none;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 500;
	color: var(--b2b-text-muted);
	border-radius: var(--b2b-radius-sm);
	cursor: pointer;
	transition: all 0.15s ease;
}

.b2b-reseller-date-btn:hover {
	color: var(--b2b-text-main);
}

.b2b-reseller-date-btn.active {
	background: #ffffff;
	color: var(--b2b-primary);
	font-weight: 600;
	box-shadow: var(--b2b-shadow-sm);
}

/* --- Filter Bars --- */
.b2b-filter-bar {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	background: var(--b2b-bg-card);
	padding: 14px 18px;
	border-radius: var(--b2b-radius-lg);
	border: 1px solid var(--b2b-border);
	box-shadow: var(--b2b-shadow-sm);
	align-items: center;
}

.b2b-filter-bar input[type="text"],
.b2b-filter-bar select {
	padding: 8px 12px;
	height: 38px;
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-md);
	background: var(--b2b-bg-page);
	font-size: 13px;
	color: var(--b2b-text-main);
	min-width: 180px;
	flex: 1;
}

.b2b-filter-bar input[type="text"]:focus,
.b2b-filter-bar select:focus {
	outline: none;
	border-color: var(--b2b-primary);
	background: #ffffff;
	box-shadow: 0 0 0 3px var(--b2b-primary-glow);
}

/* --- Tables --- */
.b2b-table-responsive {
	width: 100%;
	overflow-x: auto;
	background: var(--b2b-bg-card, #ffffff);
	border-radius: var(--b2b-radius-lg, 14px);
	border: 1px solid var(--b2b-border, #eaedf5);
	box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
	position: relative;
	-webkit-overflow-scrolling: touch;
}

.b2b-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
	text-align: left;
}

.b2b-table thead th,
.b2b-table th {
	position: sticky;
	top: 0;
	z-index: 10;
	background: #f8fafc;
	color: #64748b;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.6px;
	padding: 13px 18px;
	border-bottom: 1px solid #eaedf5;
	white-space: nowrap;
	box-shadow: 0 1px 0 #eaedf5;
}

.b2b-table td {
	padding: 14px 18px;
	border-bottom: 1px solid #f1f5f9;
	color: var(--b2b-text-main, #0f172a);
	vertical-align: middle;
	font-size: 13px;
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-table tbody tr {
	transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.b2b-table tbody tr:hover td {
	background-color: #f8fafc;
}

.b2b-table tbody tr:last-child td {
	border-bottom: none;
}

.b2b-product-img {
	width: 40px;
	height: 40px;
	border-radius: var(--b2b-radius-md, 10px);
	object-fit: cover;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
}

/* --- Order IDs Prominent Styling --- */
.b2b-order-id-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	font-size: 13.5px;
	color: #4f46e5;
	background: #eef2ff;
	padding: 3px 8px;
	border-radius: 6px;
	letter-spacing: -0.01em;
	text-decoration: none !important;
	transition: all 0.15s ease;
	border: 1px solid rgba(79, 70, 229, 0.12);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	cursor: pointer;
}

.b2b-order-id-tag:hover {
	background: #e0e7ff;
	color: #3730a3;
	border-color: rgba(79, 70, 229, 0.3);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(79, 70, 229, 0.1);
}

.b2b-payout-id-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	font-size: 12.5px;
	color: #4f46e5;
	background: #f5f3ff;
	padding: 3px 8px;
	border-radius: 6px;
	text-decoration: none !important;
	border: 1px solid rgba(139, 92, 246, 0.15);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* --- Profit Display Components --- */
.b2b-profit-cell {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.b2b-profit-val {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.b2b-profit-positive {
	color: #047857 !important;
}

.b2b-profit-pending {
	color: #b45309 !important;
}

.b2b-profit-cancelled {
	color: #b91c1c !important;
}

.b2b-profit-del {
	font-size: 11.5px;
	color: #94a3b8;
	text-decoration: line-through;
}

.b2b-profit-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 4px;
	width: fit-content;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

.b2b-profit-tag-positive {
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
}

.b2b-profit-tag-pending {
	background: #fffbeb;
	color: #b45309;
	border: 1px solid #fde68a;
}

.b2b-profit-tag-cancelled {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* --- Modern SaaS Status Badges & Pills (Exact Prompt Color System) --- */
.b2b-badge,
.b2b-status-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 3px 10px !important;
	border-radius: var(--b2b-radius-full, 9999px) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	text-transform: capitalize !important;
	border: 1px solid transparent !important;
	transition: all 0.15s ease !important;
}

.b2b-badge::before,
.b2b-status-pill::before {
	content: "" !important;
	display: inline-block !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background-color: currentColor !important;
	opacity: 0.85 !important;
	flex-shrink: 0 !important;
}

/* Completed / Paid / Approved / In Stock → Green */
.b2b-badge.completed,
.b2b-badge.paid,
.b2b-badge.approved,
.b2b-badge.instock,
.b2b-status-pill.status-completed,
.b2b-status-pill.status-paid,
.b2b-status-pill.status-approved {
	background: #ecfdf5 !important;
	color: #047857 !important;
	border-color: #a7f3d0 !important;
}

/* Processing → Blue */
.b2b-badge.processing,
.b2b-status-pill.status-processing {
	background: #eff6ff !important;
	color: #1d4ed8 !important;
	border-color: #bfdbfe !important;
}

/* Pending → Orange */
.b2b-badge.pending,
.b2b-status-pill.status-pending {
	background: #fffbeb !important;
	color: #b45309 !important;
	border-color: #fde68a !important;
}

/* On Hold → Yellow */
.b2b-badge.on-hold,
.b2b-status-pill.status-on-hold {
	background: #fefce8 !important;
	color: #a16207 !important;
	border-color: #fef08a !important;
}

/* Cancelled / Rejected / Failed / Out of stock → Red */
.b2b-badge.cancelled,
.b2b-badge.rejected,
.b2b-badge.failed,
.b2b-badge.outofstock,
.b2b-status-pill.status-cancelled,
.b2b-status-pill.status-rejected,
.b2b-status-pill.status-failed {
	background: #fef2f2 !important;
	color: #b91c1c !important;
	border-color: #fecaca !important;
}

/* Refunded → Gray */
.b2b-badge.refunded,
.b2b-status-pill.status-refunded {
	background: #f1f5f9 !important;
	color: #475569 !important;
	border-color: #e2e8f0 !important;
}

/* --- Method Badges (bKash, Nagad, Rocket, Bank, PayPal) --- */
.b2b-method-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 3px 10px !important;
	border-radius: var(--b2b-radius-full, 9999px) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	border: 1px solid transparent !important;
	transition: all 0.15s ease !important;
}

.b2b-method-pill.b2b-method-bkash {
	background: #fdf2f8 !important;
	color: #be185d !important;
	border-color: #fbcfe8 !important;
}

.b2b-method-pill.b2b-method-nagad {
	background: #fff7ed !important;
	color: #c2410c !important;
	border-color: #ffedd5 !important;
}

.b2b-method-pill.b2b-method-rocket {
	background: #faf5ff !important;
	color: #7e22ce !important;
	border-color: #f3e8ff !important;
}

.b2b-method-pill.b2b-method-bank {
	background: #f0f9ff !important;
	color: #0369a1 !important;
	border-color: #e0f2fe !important;
}

.b2b-method-pill.b2b-method-paypal {
	background: #eff6ff !important;
	color: #1d4ed8 !important;
	border-color: #dbeafe !important;
}

.b2b-method-pill.b2b-method-default {
	background: #f8fafc !important;
	color: #475569 !important;
	border-color: #e2e8f0 !important;
}

/* --- Empty State Component --- */
.b2b-empty-state-wrap {
	padding: 48px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.b2b-empty-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #f1f5f9;
	color: #94a3b8;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.b2b-empty-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
}

.b2b-empty-desc {
	font-size: 12.5px;
	color: #64748b;
	margin: 0;
	max-width: 340px;
}


/* --- Buttons & Action Controls (Comprehensive SaaS Design System) --- */
.b2b-btn,
.b2b-dashboard-wrapper button,
.b2b-dashboard-wrapper input[type="button"],
.b2b-dashboard-wrapper input[type="submit"],
.b2b-auth-container button,
.b2b-auth-container input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 38px !important;
	padding: 0 16px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border: 1px solid transparent !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	vertical-align: middle !important;
	user-select: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.b2b-btn svg,
.b2b-dashboard-wrapper button svg,
.b2b-btn svg *,
.b2b-dashboard-wrapper button svg * {
	flex-shrink: 0 !important;
	vertical-align: middle !important;
	transition: transform 0.15s ease, stroke 0.15s ease, color 0.15s ease !important;
}

.b2b-btn:focus-visible,
.b2b-dashboard-wrapper button:focus-visible,
.b2b-dashboard-wrapper input[type="submit"]:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px !important;
}

.b2b-btn:active,
.b2b-dashboard-wrapper button:active {
	transform: translateY(1px) !important;
}

/* Primary Button Variant (Matches Create Order / Royal Blue Standard) */
.b2b-btn-primary,
.b2b-auth-container button[type="submit"],
.b2b-dashboard-wrapper .b2b-btn-primary,
.b2b-dashboard-wrapper input[type="submit"].b2b-btn-primary,
a.b2b-btn-primary,
button.b2b-btn-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 38px !important;
	padding: 0 18px !important;
	background: #2563eb !important;
	background-color: #2563eb !important;
	color: #ffffff !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-btn-primary *,
.b2b-btn-primary span,
.b2b-auth-container button[type="submit"] *,
.b2b-auth-container button[type="submit"] span,
.b2b-dashboard-wrapper .b2b-btn-primary *,
.b2b-dashboard-wrapper .b2b-btn-primary span {
	color: #ffffff !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.b2b-btn-primary svg,
.b2b-dashboard-wrapper .b2b-btn-primary svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
	fill: none !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

.b2b-btn-primary:hover,
.b2b-auth-container button[type="submit"]:hover,
.b2b-dashboard-wrapper .b2b-btn-primary:hover,
a.b2b-btn-primary:hover,
button.b2b-btn-primary:hover {
	background: #1d4ed8 !important;
	background-color: #1d4ed8 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

.b2b-btn-primary:hover *,
.b2b-dashboard-wrapper .b2b-btn-primary:hover * {
	color: #ffffff !important;
}

.b2b-btn-primary:focus-visible,
.b2b-dashboard-wrapper .b2b-btn-primary:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px !important;
}

.b2b-btn-primary:active,
.b2b-dashboard-wrapper .b2b-btn-primary:active {
	transform: translateY(1px) !important;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22) !important;
}

.b2b-btn-primary:disabled,
.b2b-btn-primary[disabled],
.b2b-dashboard-wrapper .b2b-btn-primary:disabled,
.b2b-dashboard-wrapper .b2b-btn-primary[disabled] {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Secondary Button Variant (Clean SaaS Outline / Slate) */
.b2b-btn-secondary,
.b2b-dashboard-wrapper .b2b-btn-secondary,
a.b2b-btn-secondary,
button.b2b-btn-secondary {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #334155 !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-btn-secondary *,
.b2b-btn-secondary span,
.b2b-dashboard-wrapper .b2b-btn-secondary *,
.b2b-dashboard-wrapper .b2b-btn-secondary span {
	color: #334155 !important;
}

.b2b-btn-secondary svg,
.b2b-dashboard-wrapper .b2b-btn-secondary svg {
	stroke: #475569 !important;
	color: #475569 !important;
	fill: none !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

.b2b-btn-secondary:hover,
.b2b-dashboard-wrapper .b2b-btn-secondary:hover,
a.b2b-btn-secondary:hover,
button.b2b-btn-secondary:hover {
	background: #f8fafc !important;
	background-color: #f8fafc !important;
	color: #0f172a !important;
	border-color: #94a3b8 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

.b2b-btn-secondary:hover *,
.b2b-dashboard-wrapper .b2b-btn-secondary:hover * {
	color: #0f172a !important;
}

.b2b-btn-secondary:hover svg,
.b2b-dashboard-wrapper .b2b-btn-secondary:hover svg {
	stroke: #0f172a !important;
	color: #0f172a !important;
}

.b2b-btn-secondary:active,
.b2b-dashboard-wrapper .b2b-btn-secondary:active {
	transform: translateY(1px) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Success Button Variant */
.b2b-btn-success,
.b2b-dashboard-wrapper .b2b-btn-success,
a.b2b-btn-success,
button.b2b-btn-success {
	background: #10b981 !important;
	background-color: #10b981 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-btn-success *,
.b2b-btn-success span,
.b2b-dashboard-wrapper .b2b-btn-success *,
.b2b-dashboard-wrapper .b2b-btn-success span {
	color: #ffffff !important;
}

.b2b-btn-success svg,
.b2b-dashboard-wrapper .b2b-btn-success svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
	fill: none !important;
}

.b2b-btn-success:hover,
.b2b-dashboard-wrapper .b2b-btn-success:hover,
a.b2b-btn-success:hover,
button.b2b-btn-success:hover {
	background: #059669 !important;
	background-color: #059669 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

/* Danger Button Variant (Solid & Action) */
.b2b-btn-danger,
.b2b-dashboard-wrapper .b2b-btn-danger,
a.b2b-btn-danger,
button.b2b-btn-danger {
	background: #ef4444 !important;
	background-color: #ef4444 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-btn-danger *,
.b2b-btn-danger span,
.b2b-dashboard-wrapper .b2b-btn-danger *,
.b2b-dashboard-wrapper .b2b-btn-danger span {
	color: #ffffff !important;
}

.b2b-btn-danger svg,
.b2b-dashboard-wrapper .b2b-btn-danger svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
	fill: none !important;
}

.b2b-btn-danger:hover,
.b2b-dashboard-wrapper .b2b-btn-danger:hover,
a.b2b-btn-danger:hover,
button.b2b-btn-danger:hover {
	background: #dc2626 !important;
	background-color: #dc2626 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

/* Outline Button Variant (Crisp Branded Primary Outline) */
.b2b-btn-outline,
.b2b-dashboard-wrapper .b2b-btn-outline,
a.b2b-btn-outline,
button.b2b-btn-outline {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #2563eb !important;
	border: 1px solid #2563eb !important;
	border-radius: 8px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-btn-outline *,
.b2b-btn-outline span,
.b2b-dashboard-wrapper .b2b-btn-outline *,
.b2b-dashboard-wrapper .b2b-btn-outline span {
	color: #2563eb !important;
}

.b2b-btn-outline svg,
.b2b-dashboard-wrapper .b2b-btn-outline svg {
	stroke: #2563eb !important;
	color: #2563eb !important;
	fill: none !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

.b2b-btn-outline:hover,
.b2b-dashboard-wrapper .b2b-btn-outline:hover,
a.b2b-btn-outline:hover,
button.b2b-btn-outline:hover {
	background: #eff6ff !important;
	background-color: #eff6ff !important;
	color: #1d4ed8 !important;
	border-color: #1d4ed8 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 3px 10px rgba(37, 99, 235, 0.2) !important;
}

.b2b-btn-outline:hover *,
.b2b-dashboard-wrapper .b2b-btn-outline:hover * {
	color: #1d4ed8 !important;
}

.b2b-btn-outline:hover svg,
.b2b-dashboard-wrapper .b2b-btn-outline:hover svg {
	stroke: #1d4ed8 !important;
	color: #1d4ed8 !important;
}

.b2b-btn-outline:active,
.b2b-dashboard-wrapper .b2b-btn-outline:active {
	transform: translateY(1px) !important;
	box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1) !important;
}

/* Size Modifiers */
.b2b-btn-sm,
.b2b-dashboard-wrapper .b2b-btn-sm,
a.b2b-btn-sm,
button.b2b-btn-sm {
	height: 32px !important;
	padding: 0 12px !important;
	font-size: 12px !important;
	border-radius: 6px !important;
	gap: 5px !important;
}

.b2b-btn-lg,
.b2b-dashboard-wrapper .b2b-btn-lg,
a.b2b-btn-lg,
button.b2b-btn-lg {
	height: 44px !important;
	padding: 0 22px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	gap: 8px !important;
}

.b2b-btn-full,
.b2b-dashboard-wrapper .b2b-btn-full {
	width: 100% !important;
	display: flex !important;
}

/* Disabled Button State */
.b2b-btn:disabled,
.b2b-btn[disabled],
.b2b-btn.disabled,
.b2b-dashboard-wrapper button:disabled,
.b2b-dashboard-wrapper button[disabled],
.b2b-dashboard-wrapper .b2b-btn:disabled,
.b2b-dashboard-wrapper .b2b-btn[disabled] {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	box-shadow: none !important;
	transform: none !important;
}

/* --- Premium SaaS Payout Action Buttons --- */
#b2b_payout_submit_btn,
.b2b-dashboard-wrapper #b2b_payout_submit_btn,
button#b2b_payout_submit_btn {
	background-color: #2563eb !important;
	background: #2563eb !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	height: 42px !important;
	padding: 0 20px !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	width: 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#b2b_payout_submit_btn:hover,
.b2b-dashboard-wrapper #b2b_payout_submit_btn:hover,
button#b2b_payout_submit_btn:hover {
	background-color: #1d4ed8 !important;
	background: #1d4ed8 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

#b2b_payout_submit_btn *,
#b2b_payout_submit_btn span,
.b2b-dashboard-wrapper #b2b_payout_submit_btn *,
.b2b-dashboard-wrapper #b2b_payout_submit_btn span {
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

#b2b_payout_submit_btn svg,
.b2b-dashboard-wrapper #b2b_payout_submit_btn svg {
	stroke: #ffffff !important;
	color: #ffffff !important;
	fill: none !important;
	display: inline-block !important;
}

.b2b-payout-table-actions {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	justify-content: flex-end !important;
	flex-wrap: wrap !important;
}

.b2b-btn-payout-details,
.b2b-view-payout-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	height: 32px !important;
	padding: 0 13px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #4f46e5 !important;
	background: #eef2ff !important;
	border: 1px solid #e0e7ff !important;
	border-radius: 7px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 1px 2px rgba(79, 70, 229, 0.06) !important;
}

.b2b-btn-payout-details svg,
.b2b-view-payout-btn svg {
	width: 13px !important;
	height: 13px !important;
	stroke: #4f46e5 !important;
	fill: none !important;
	display: inline-block !important;
	transition: stroke 0.18s ease !important;
}

.b2b-btn-payout-details:hover,
.b2b-view-payout-btn:hover {
	background: #4f46e5 !important;
	color: #ffffff !important;
	border-color: #4f46e5 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
}

.b2b-btn-payout-details:hover svg,
.b2b-view-payout-btn:hover svg {
	stroke: #ffffff !important;
}

.b2b-btn-payout-details:active,
.b2b-view-payout-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 1px 2px rgba(79, 70, 229, 0.15) !important;
}

/* Action - View Details Button (Orders & Payouts) */
.b2b-reseller-view-details-btn,
.b2b-btn-payout-details,
.b2b-view-payout-btn,
.b2b-dashboard-wrapper .b2b-reseller-view-details-btn,
.b2b-dashboard-wrapper .b2b-btn-payout-details,
.b2b-dashboard-wrapper .b2b-view-payout-btn,
button.b2b-reseller-view-details-btn,
button.b2b-btn-payout-details {
	background-color: #2563eb !important;
	background: #2563eb !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	height: 32px !important;
	padding: 0 13px !important;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
}

.b2b-reseller-view-details-btn *,
.b2b-reseller-view-details-btn span,
.b2b-btn-payout-details *,
.b2b-btn-payout-details span,
.b2b-view-payout-btn *,
.b2b-view-payout-btn span {
	color: #ffffff !important;
	font-weight: 600 !important;
}

.b2b-reseller-view-details-btn svg,
.b2b-btn-payout-details svg,
.b2b-view-payout-btn svg {
	width: 13px !important;
	height: 13px !important;
	stroke: #ffffff !important;
	color: #ffffff !important;
	fill: none !important;
	display: inline-block !important;
}

.b2b-reseller-view-details-btn:hover,
.b2b-btn-payout-details:hover,
.b2b-view-payout-btn:hover {
	background-color: #1d4ed8 !important;
	background: #1d4ed8 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* Action - Cancel Button (Orders & Payouts) */
.b2b-reseller-open-cancel-btn,
.b2b-btn-payout-cancel,
.b2b-cancel-payout-btn,
.b2b-dashboard-wrapper .b2b-reseller-open-cancel-btn,
.b2b-dashboard-wrapper .b2b-btn-payout-cancel,
.b2b-dashboard-wrapper .b2b-cancel-payout-btn,
button.b2b-reseller-open-cancel-btn,
button.b2b-btn-payout-cancel {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	height: 32px !important;
	padding: 0 13px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	background-color: #ef4444 !important;
	background: #ef4444 !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.28) !important;
}

.b2b-reseller-open-cancel-btn *,
.b2b-reseller-open-cancel-btn span,
.b2b-btn-payout-cancel *,
.b2b-btn-payout-cancel span,
.b2b-cancel-payout-btn *,
.b2b-cancel-payout-btn span {
	color: #ffffff !important;
	font-weight: 600 !important;
}

.b2b-reseller-open-cancel-btn svg,
.b2b-btn-payout-cancel svg,
.b2b-cancel-payout-btn svg {
	width: 12px !important;
	height: 12px !important;
	stroke: #ffffff !important;
	color: #ffffff !important;
	fill: none !important;
	display: inline-block !important;
}

.b2b-reseller-open-cancel-btn:hover,
.b2b-btn-payout-cancel:hover,
.b2b-cancel-payout-btn:hover {
	background-color: #dc2626 !important;
	background: #dc2626 !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
}

.b2b-reseller-open-cancel-btn:hover svg {
	stroke: #ffffff !important;
}

.b2b-btn-payout-cancel:active,
.b2b-cancel-payout-btn:active,
.b2b-reseller-open-cancel-btn:active {
	transform: translateY(0) !important;
	box-shadow: 0 1px 2px rgba(220, 38, 38, 0.15) !important;
}

.b2b-btn-payout-cancel:disabled,
.b2b-btn-payout-cancel[disabled],
.b2b-cancel-payout-btn:disabled,
.b2b-cancel-payout-btn[disabled] {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Custom Back Button & Table Actions */
.b2b-back-btn,
.b2b-back-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-back-btn:hover svg,
.b2b-back-link:hover svg {
	transform: translateX(-2px) !important;
}

.b2b-table-actions {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	justify-content: flex-end !important;
}

/* --- Create Order Builder Styles --- */
.b2b-order-creation-wrapper {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	align-items: flex-start;
}

@media (max-width: 1000px) {
	.b2b-order-creation-wrapper {
		grid-template-columns: 1fr;
	}
}

.b2b-form-input,
.b2b-input {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-md);
	font-size: 13px;
	background: var(--b2b-bg-page);
	color: var(--b2b-text-main);
	transition: all 0.2s ease;
}

textarea.b2b-form-input,
textarea.b2b-input {
	height: auto;
	padding: 10px 12px;
}

.b2b-form-input:focus,
.b2b-input:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--b2b-primary);
	box-shadow: 0 0 0 3px var(--b2b-primary-glow);
}

.b2b-order-preview-card {
	background: #ffffff;
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-lg);
	padding: 24px;
	box-shadow: var(--b2b-shadow-sm);
	position: sticky;
	top: 20px;
}

/* --- Mobile Header & Menu Toggle --- */
.b2b-mobile-header {
	display: none;
	background: var(--b2b-bg-card);
	border-bottom: 1px solid var(--b2b-border);
	padding: 14px 20px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.b2b-mobile-brand {
	font-size: 16px;
	font-weight: 800;
	color: var(--b2b-text-main);
	display: flex;
	align-items: center;
	gap: 8px;
}

.b2b-menu-toggle {
	background: var(--b2b-bg-hover);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-md);
	padding: 6px;
	color: var(--b2b-text-main);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- Messages / Notice --- */
.b2b-message, .b2b-notice {
	padding: 14px 18px;
	border-radius: var(--b2b-radius-md);
	font-size: 13px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.b2b-message-success, .b2b-notice-success {
	background: var(--b2b-success-light);
	border: 1px solid var(--b2b-success-border);
	color: var(--b2b-success-dark);
}

.b2b-message-error, .b2b-notice-error {
	background: var(--b2b-danger-light);
	border: 1px solid var(--b2b-danger-border);
	color: var(--b2b-danger-dark);
}

/* --- Responsive Breakpoints --- */
@media (max-width: 1200px) {
	.b2b-sidebar {
		width: 220px;
	}
	.b2b-main {
		padding: 20px 24px;
	}
}

@media (max-width: 850px) {
	.b2b-dashboard-wrapper {
		flex-direction: column;
		min-height: auto;
	}
	.b2b-mobile-header {
		display: flex;
	}
	.b2b-sidebar {
		position: fixed;
		top: 0;
		left: -280px;
		width: 260px;
		height: 100vh;
		z-index: 9999;
		display: flex;
		border-right: 1px solid var(--b2b-border);
		box-shadow: var(--b2b-shadow-lg);
		transition: left 0.3s ease;
	}
	.b2b-sidebar-overlay {
		display: none;
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(15, 23, 42, 0.4);
		backdrop-filter: blur(2px);
		z-index: 9998;
	}
	.b2b-sidebar.b2b-sidebar-open {
		left: 0;
	}
	.b2b-main {
		padding: 16px;
		width: 100%;
	}
	.b2b-portal-top-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.b2b-portal-header-right {
		width: 100%;
		justify-content: flex-start;
	}
	
	/* Tables responsiveness */
	.b2b-table-responsive {
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.b2b-table thead {
		display: none;
	}
	.b2b-table tbody tr {
		display: block;
		margin-bottom: 16px;
		background: var(--b2b-bg-card);
		border: 1px solid var(--b2b-border);
		border-radius: var(--b2b-radius-md);
		box-shadow: var(--b2b-shadow-sm);
	}
	.b2b-table tbody tr td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		border-bottom: 1px solid var(--b2b-border-subtle);
		text-align: right;
	}
	.b2b-table tbody tr td::before {
		content: attr(data-label);
		font-weight: 600;
		text-transform: uppercase;
		font-size: 11px;
		color: var(--b2b-text-muted);
		margin-right: 12px;
		text-align: left;
	}
}

@media (max-width: 580px) {
	.b2b-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.b2b-filter-bar input[type="text"],
	.b2b-filter-bar select {
		width: 100%;
	}
}


/* --- Authentication Forms (Login & Registration) --- */
.b2b-reseller-login-wrapper,
.b2b-reseller-registration-wrapper {
	max-width: 540px;
	margin: 40px auto;
	background: var(--b2b-bg-card);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow-lg);
	padding: 36px 32px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
	color: var(--b2b-text-main);
	box-sizing: border-box;
}

.b2b-reseller-registration-wrapper {
	max-width: 680px;
}

.b2b-form-header {
	margin-bottom: 24px;
	text-align: center;
}

.b2b-form-header h2 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	color: var(--b2b-text-main);
	letter-spacing: -0.02em;
}

.b2b-form-header p {
	margin: 0;
	font-size: 13px;
	color: var(--b2b-text-muted);
}

.b2b-form-section {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--b2b-border-subtle);
}

.b2b-form-section h3 {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--b2b-primary);
	margin: 0 0 16px;
}

.b2b-form-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 580px) {
	.b2b-form-row-2col {
		grid-template-columns: 1fr;
	}
}

.b2b-reseller-login-form .form-row,
.b2b-reseller-registration-form .form-row {
	margin-bottom: 16px;
}

.b2b-reseller-login-form label,
.b2b-reseller-registration-form label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--b2b-text-muted);
	margin-bottom: 6px;
}

.b2b-reseller-login-form input[type="text"],
.b2b-reseller-login-form input[type="email"],
.b2b-reseller-login-form input[type="password"],
.b2b-reseller-registration-form input[type="text"],
.b2b-reseller-registration-form input[type="email"],
.b2b-reseller-registration-form input[type="password"],
.b2b-reseller-registration-form textarea {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-md);
	background: var(--b2b-bg-page);
	font-size: 13px;
	color: var(--b2b-text-main);
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.b2b-reseller-registration-form textarea {
	height: auto;
	padding: 10px 12px;
}

.b2b-reseller-login-form input:focus,
.b2b-reseller-registration-form input:focus,
.b2b-reseller-registration-form textarea:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--b2b-primary);
	box-shadow: 0 0 0 3px var(--b2b-primary-glow);
}

.b2b-form-row-inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.b2b-checkbox-label {
	display: flex !important;
	align-items: center;
	gap: 6px;
	font-size: 13px !important;
	color: var(--b2b-text-main) !important;
	cursor: pointer;
	margin-bottom: 0 !important;
}

.b2b-forgot-link {
	font-size: 12px;
	color: var(--b2b-primary);
	text-decoration: none;
	font-weight: 500;
}

.b2b-btn-full {
	width: 100%;
	height: 44px;
	font-size: 14.5px;
	font-weight: 700;
	background: #2563eb !important;
	color: #ffffff !important;
	border: none;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
	cursor: pointer;
	transition: all 0.2s ease;
}

.b2b-btn-full:hover {
	background: #1d4ed8 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.b2b-form-footer {
	margin-top: 20px;
	text-align: center;
	font-size: 13px;
	color: var(--b2b-text-muted);
}

.b2b-form-footer a {
	color: var(--b2b-primary);
	font-weight: 600;
	text-decoration: none;
}

/* Table Card Rows on Small Mobile */
@media (max-width: 650px) {
	.b2b-table-card-mobile thead {
		display: none;
	}
	.b2b-table-card-mobile,
	.b2b-table-card-mobile tbody,
	.b2b-table-card-mobile tr,
	.b2b-table-card-mobile td {
		display: block;
		width: 100%;
	}
	.b2b-table-card-mobile tr {
		margin-bottom: 12px;
		border: 1px solid var(--b2b-border);
		border-radius: var(--b2b-radius-md);
		background: #ffffff;
		padding: 6px 0;
	}
	.b2b-table-card-mobile td {
		text-align: right;
		padding: 8px 14px;
		position: relative;
		border-bottom: 1px solid var(--b2b-border-subtle);
	}
	.b2b-table-card-mobile td:last-child {
		border-bottom: none;
	}
	.b2b-table-card-mobile td::before {
		content: attr(data-label);
		position: absolute;
		left: 14px;
		top: 8px;
		font-weight: 600;
		color: var(--b2b-text-muted);
		font-size: 11px;
		text-transform: uppercase;
	}
	.b2b-table-card-mobile td .b2b-payout-table-actions {
		justify-content: flex-end !important;
		gap: 6px !important;
	}
}

/* --- Modal Components --- */
body.b2b-modal-open {
	overflow: hidden !important;
}

.b2b-modal-backdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(15, 23, 42, 0.65) !important;
	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	z-index: 99999999 !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.b2b-modal-backdrop.is-active,
.b2b-modal-backdrop[style*="display: flex"],
.b2b-modal-backdrop[style*="display: block"] {
	display: flex !important;
}

.b2b-modal-container {
	position: relative !important;
	margin: auto !important;
	background: #ffffff !important;
	border-radius: 14px !important;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.08) !important;
	width: 100% !important;
	max-width: 540px !important;
	max-height: 90vh !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border: 1px solid var(--b2b-border, #e2e8f0) !important;
	animation: b2bModalCenterPop 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
	transform-origin: center center !important;
}

@keyframes b2bModalCenterPop {
	0% {
		opacity: 0;
		transform: scale(0.92) translateY(12px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes b2bSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.b2b-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	border-bottom: 1px solid var(--b2b-border, #e2e8f0);
	background: #ffffff;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}

.b2b-modal-title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--b2b-text-main, #0f172a);
	display: flex;
	align-items: center;
	gap: 8px;
}

.b2b-modal-close {
	background: #f1f5f9;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: var(--b2b-text-muted, #64748b);
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	line-height: 1;
	transition: all 0.15s ease;
}

.b2b-modal-close:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.b2b-modal-body {
	padding: 22px;
	max-height: 82vh;
	overflow-y: auto;
}



/* --- CREATE ORDER LAYOUT --- */
.b2b-grid-2col {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 30px;
	align-items: start;
}

@media (max-width: 1024px) {
	.b2b-grid-2col {
		grid-template-columns: 1fr;
	}
	.b2b-order-preview-card {
		position: static !important;
	}
}

.item-profit-display {
    transition: color 0.3s;
}

.b2b-trend-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.b2b-trend-up {
    background: var(--b2b-success-light, #ecfdf5);
    color: var(--b2b-success-dark, #065f46);
}
.b2b-trend-down {
    background: var(--b2b-danger-light, #fef2f2);
    color: var(--b2b-danger-dark, #991b1b);
}
.b2b-trend-neutral {
    background: var(--b2b-bg-page);
    color: var(--b2b-text-muted);
}

/* Customer Directory Search Button */
.b2b-customer-search-btn,
button.b2b-customer-search-btn {
	background-color: #22c55e !important;
	background: #22c55e !important;
	color: #000000 !important;
	font-weight: 700 !important;
	border-radius: 14px !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.b2b-customer-search-btn *,
.b2b-customer-search-btn span {
	color: #000000 !important;
	font-weight: 700 !important;
}

.b2b-customer-search-btn svg {
	stroke: #000000 !important;
	color: #000000 !important;
}

.b2b-customer-search-btn:hover,
button.b2b-customer-search-btn:hover {
	background-color: #16a34a !important;
	background: #16a34a !important;
	color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4) !important;
}

.b2b-customer-search-btn:active,
button.b2b-customer-search-btn:active {
	transform: translateY(1px) !important;
}

/* POS Card Add To Order Button */
.b2b-pos-card-add-btn,
button.b2b-pos-card-add-btn {
	width: 34px !important;
	height: 34px !important;
	background-color: #2563eb !important;
	background: #2563eb !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28) !important;
}

.b2b-pos-card-add-btn svg {
	width: 18px !important;
	height: 18px !important;
	stroke: #ffffff !important;
	color: #ffffff !important;
	stroke-width: 2.6 !important;
	display: block !important;
	margin: auto !important;
	transition: transform 0.15s ease !important;
}

.b2b-pos-card-add-btn:hover:not(:disabled) {
	background-color: #1d4ed8 !important;
	background: #1d4ed8 !important;
	color: #ffffff !important;
	transform: scale(1.06) !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

.b2b-pos-card-add-btn:hover:not(:disabled) svg {
	stroke: #ffffff !important;
	transform: rotate(90deg) !important;
}

.b2b-pos-card-add-btn:active:not(:disabled) {
	transform: scale(0.94) !important;
}

.b2b-pos-card-add-btn:disabled {
	background: #e2e8f0 !important;
	color: #94a3b8 !important;
	border: none !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
	box-shadow: none !important;
}

.b2b-pos-card-add-btn:disabled svg {
	stroke: #94a3b8 !important;
}

/* ==========================================================================
   SUPPORT & MESSAGING SYSTEM
   ========================================================================== */
.b2b-unread-row {
	background-color: #eff6ff !important;
}

.b2b-unread-row:hover {
	background-color: #dbeafe !important;
}

.b2b-reseller-open-ticket-chat:hover {
	background-color: #1d4ed8 !important;
	background: #1d4ed8 !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

#b2b_reseller_chat_stream::-webkit-scrollbar,
#b2b_admin_chat_messages::-webkit-scrollbar {
	width: 6px;
}

#b2b_reseller_chat_stream::-webkit-scrollbar-thumb,
#b2b_admin_chat_messages::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

/* ==========================================================================
   ADVANCED RESPONSIVE ENHANCEMENTS (Mobile, Tablet, Laptop, Desktop)
   ========================================================================== */

/* 1. Universal Touch & Viewport Optimizations */
@media (max-width: 768px) {
	/* Prevent iOS Safari auto-zoom on focus by enforcing 16px minimum font size */
	.b2b-dashboard-wrapper input[type="text"],
	.b2b-dashboard-wrapper input[type="number"],
	.b2b-dashboard-wrapper input[type="email"],
	.b2b-dashboard-wrapper input[type="tel"],
	.b2b-dashboard-wrapper input[type="password"],
	.b2b-dashboard-wrapper select,
	.b2b-dashboard-wrapper textarea,
	.b2b-reseller-login-wrapper input,
	.b2b-reseller-registration-wrapper input,
	.b2b-reseller-login-wrapper select,
	.b2b-reseller-registration-wrapper select {
		font-size: 16px !important;
	}

	.b2b-dashboard-wrapper {
		border-radius: 12px !important;
		margin: 8px 0 !important;
		min-height: auto !important;
	}

	.b2b-main {
		padding: 14px 12px !important;
	}

	/* Top Portal Header adjustments */
	.b2b-portal-top-header {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		padding-bottom: 14px !important;
		margin-bottom: 16px !important;
	}

	.b2b-portal-header-left {
		width: 100%;
	}

	.b2b-portal-header-left h1,
	.b2b-portal-header-left .b2b-portal-title {
		font-size: 18px !important;
	}

	.b2b-portal-header-right {
		width: 100% !important;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
		gap: 8px !important;
	}

	.b2b-balance-pill {
		font-size: 12px !important;
		padding: 6px 12px !important;
		flex: 1 1 auto !important;
		justify-content: center !important;
	}

	.b2b-btn-pos-header,
	.b2b-btn-create-order {
		flex: 1 1 auto !important;
		justify-content: center !important;
		font-size: 13px !important;
		height: 40px !important;
		padding: 0 14px !important;
	}

	/* 2-Column Grid on mobile becomes 1 column */
	.b2b-grid-2col {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	/* Support Chat Layout */
	.b2b-support-chat-box {
		padding: 12px !important;
	}

	#b2b_reseller_chat_stream {
		max-height: 50vh !important;
		padding: 10px !important;
	}

	.b2b-chat-input-row {
		flex-direction: column !important;
		gap: 8px !important;
	}

	.b2b-chat-input-row textarea {
		width: 100% !important;
	}

	.b2b-chat-input-row button {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Auth wrappers (Login & Register) */
	.b2b-reseller-login-wrapper,
	.b2b-reseller-registration-wrapper {
		margin: 16px auto !important;
		padding: 24px 18px !important;
		border-radius: 12px !important;
	}

	.b2b-form-row.b2b-grid-2col {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
}

/* 2. Compact Phones & Small Screens (< 480px) */
@media (max-width: 480px) {
	.b2b-cards-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.b2b-card {
		padding: 14px 12px !important;
		border-radius: 10px !important;
	}

	.b2b-card h4 {
		font-size: 11px !important;
	}

	.b2b-card .b2b-card-value {
		font-size: 20px !important;
		margin-bottom: 4px !important;
	}

	.b2b-kpi-icon {
		width: 32px !important;
		height: 32px !important;
	}

	.b2b-card-sub {
		font-size: 11px !important;
	}

	.b2b-filter-bar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
	}

	.b2b-filter-bar > * {
		width: 100% !important;
	}

	/* Modals on Small Phones */
	.b2b-modal-content,
	.b2b-modal-card {
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
		margin: 10px auto !important;
		padding: 16px !important;
		border-radius: 12px !important;
	}

	.b2b-modal-header {
		padding: 14px 16px !important;
	}

	.b2b-modal-body {
		padding: 14px 16px !important;
	}

	.b2b-modal-footer {
		padding: 12px 16px !important;
		flex-direction: column !important;
		gap: 8px !important;
	}

	.b2b-modal-footer button,
	.b2b-modal-footer a {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* 3. Laptops & Medium Screens (1024px - 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {
	.b2b-sidebar {
		width: 230px;
	}

	.b2b-main {
		padding: 22px 26px;
	}

	.b2b-cards-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 14px;
	}

	.b2b-grid-2col {
		grid-template-columns: 1fr 340px;
		gap: 20px;
	}
}

/* 4. Large Laptops & Desktops (1440px+) */
@media (min-width: 1440px) {
	.b2b-cards-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;
	}

	.b2b-grid-2col {
		grid-template-columns: 1fr 380px;
		gap: 28px;
	}
}

/* 5. Smooth Table Horizontal Scrolling Container on Tablets & Desktop */
.b2b-table-scroll-container {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--b2b-radius-md);
	border: 1px solid var(--b2b-border);
	background: var(--b2b-bg-card);
	margin-bottom: 20px;
}

.b2b-table-scroll-container table {
	width: 100%;
	min-width: 650px;
	border-collapse: collapse;
}

.b2b-table-scroll-container table th,
.b2b-table-scroll-container table td {
	white-space: nowrap;
}

/* ==========================================================================
   6. DEDICATED MOBILE RESPONSIVE ENGINE (RESELLER PORTAL, WEBSITE & POS)
   ========================================================================== */

/* Mobile Header & Sidebar Drawer */
@media (max-width: 1024px) {
	.b2b-dashboard-wrapper {
		display: block !important;
		position: relative;
	}

	.b2b-mobile-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		background: #ffffff;
		border-bottom: 1px solid #e2e8f0;
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.b2b-sidebar {
		position: fixed !important;
		top: 0 !important;
		left: -280px !important;
		width: 270px !important;
		height: 100vh !important;
		background: #ffffff !important;
		z-index: 10000 !important;
		transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
		box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
		overflow-y: auto !important;
	}

	.b2b-sidebar.b2b-sidebar-open {
		left: 0 !important;
	}

	.b2b-sidebar-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(15, 23, 42, 0.55);
		backdrop-filter: blur(3px);
		z-index: 9999;
		display: none;
	}

	.b2b-main {
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 14px 12px !important;
		box-sizing: border-box;
	}
}

/* Website Catalog Showcase Mobile Styles */
@media (max-width: 768px) {
	.b2b-catalog-hero {
		padding: 18px 16px !important;
		border-radius: 12px !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 16px !important;
	}

	.b2b-catalog-hero h2 {
		font-size: 18px !important;
	}

	.b2b-catalog-hero p {
		font-size: 12px !important;
	}

	.b2b-catalog-hero > div:last-child {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 8px !important;
		width: 100% !important;
	}

	.b2b-catalog-hero > div:last-child > div {
		min-width: 0 !important;
		padding: 8px 6px !important;
	}

	.b2b-catalog-hero > div:last-child > div > div:first-child {
		font-size: 16px !important;
	}

	.b2b-catalog-hero > div:last-child > div > div:last-child {
		font-size: 9.5px !important;
	}

	/* Search & Filter bar on mobile */
	.b2b-saas-card-body > div {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	#b2b_web_search_input {
		font-size: 14px !important;
	}

	#b2b_web_category_select,
	#b2b_web_stock_select,
	#b2b_web_sort_select {
		width: 100% !important;
		min-width: 0 !important;
		font-size: 13px !important;
	}

	#b2b_web_product_grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	.b2b-web-card {
		border-radius: 10px !important;
	}

	.b2b-web-card h4 {
		font-size: 12.5px !important;
		height: 34px !important;
		margin-bottom: 6px !important;
	}

	.b2b-web-card > div:last-child {
		padding: 10px 12px !important;
	}

	/* Product Quick Preview Modal on Mobile */
	#b2bWebProductModal .b2b-modal-container {
		width: 94vw !important;
		max-width: 94vw !important;
		margin: 16px auto !important;
		border-radius: 12px !important;
		max-height: 90vh !important;
		overflow-y: auto !important;
	}

	#b2bWebProductModal .b2b-modal-body > div:first-child {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	#b2bModalImg {
		max-height: 200px !important;
		object-fit: contain !important;
		margin: 0 auto;
	}
}

/* Small Phones (< 480px) */
@media (max-width: 480px) {
	#b2b_web_product_grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	.b2b-catalog-hero > div:last-child {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Mobile Responsive Orders Table to Card Transformation */
@media (max-width: 768px) {
	.b2b-table-card-mobile {
		border: none !important;
		background: transparent !important;
	}

	.b2b-table-card-mobile thead {
		display: none !important;
	}

	.b2b-table-card-mobile tbody {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}

	.b2b-table-card-mobile tr {
		display: block !important;
		background: #ffffff !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 12px !important;
		padding: 14px 16px !important;
		box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
		position: relative !important;
	}

	.b2b-table-card-mobile td {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 6px 0 !important;
		border: none !important;
		border-bottom: 1px dashed #f1f5f9 !important;
		font-size: 12.5px !important;
		text-align: right !important;
	}

	.b2b-table-card-mobile td:last-child {
		border-bottom: none !important;
		padding-top: 10px !important;
		justify-content: flex-end !important;
	}

	.b2b-table-card-mobile td::before {
		content: attr(data-label) !important;
		font-weight: 700 !important;
		color: #64748b !important;
		font-size: 11.5px !important;
		text-align: left !important;
		text-transform: uppercase !important;
		letter-spacing: 0.3px !important;
	}
}