/**
 * Trade Flow Pro — Frontend Styles
 *
 * Styles for Pro dashboard extensions: progress bar,
 * spend summary, and outstanding offline orders.
 *
 * @package BloomStack\TradeFlowPro
 * @since 1.0.2
 */

/* ==========================================================================
   Tier Progress Section
   ========================================================================== */

.tf-dashboard-progress-table th {
	width: 180px;
	font-weight: 500;
	color: #6B7280;
}

.tf-dashboard-badge--next {
	display: inline-block;
	padding: 3px 10px;
	font-size: 13px;
	font-weight: 600;
	color: #D97706;
	background: #FEF3C7;
	border-radius: 4px;
}

/* --- Progress Bar --- */

.tf-progress-bar-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.tf-progress-bar {
	flex: 1;
	height: 12px;
	background: #E5E7EB;
	border-radius: 6px;
	overflow: hidden;
}

.tf-progress-bar__fill {
	height: 100%;
	background: linear-gradient(90deg, #7C3AED, #A78BFA);
	border-radius: 6px;
	transition: width 0.4s ease;
	min-width: 0;
}

.tf-progress-bar__label {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
	color: #6B7280;
	white-space: nowrap;
}

/* ==========================================================================
   Spend Summary Section
   ========================================================================== */

.tf-dashboard-spend-table th {
	width: 180px;
	font-weight: 500;
	color: #6B7280;
}

/* ==========================================================================
   Outstanding Offline Orders
   ========================================================================== */

.tf-offline-total {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 12px 16px;
	background: #FEF3C7;
	border-radius: 6px;
	border-left: 4px solid #F59E0B;
}

.tf-offline-total__label {
	font-size: 14px;
	font-weight: 500;
	color: #92400E;
}

.tf-offline-total__amount {
	font-size: 14px;
	font-weight: 700;
	color: #92400E;
}

.tf-dashboard-offline-table th {
	font-size: 13px;
	font-weight: 600;
	color: #6B7280;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.tf-dashboard-offline-table td {
	vertical-align: middle;
}

.tf-dashboard-offline-table .button.view {
	padding: 4px 12px;
	font-size: 13px;
}