/**
 * TrustLens — Customers list. Minimal, professional restyle.
 * Flat surfaces, hairline dividers, generous whitespace, one accent.
 * Segment colour is used only as small dots + the score number.
 */

.wstl-customers-page {
	--cust-ink: #1a2433;
	--cust-muted: #6b7a8d;
	--cust-faint: #9aa7b6;
	--cust-line: #e7ecf3;
	--cust-line-soft: #f1f4f8;
	--cust-accent: var(--wstl-color-primary, #3377EE);
}

/* ---- Controls panel: contained card pairing with the table below ---- */
.wstl-customers-page .wstl-customers-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--cust-line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(20, 40, 67, 0.04);
}

/* ---- Segment filters: minimal chips with a leading dot ---- */
.wstl-customers-page .wstl-segment-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wstl-customers-page .wstl-segment-filters li { margin: 0; }
.wstl-customers-page .wstl-segment-filters a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--cust-muted);
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.wstl-customers-page .wstl-segment-filters a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
	background: #c2cdda;
}
.wstl-customers-page .wstl-segment-filters a:hover { background: #f3f6f9; color: var(--cust-ink); }
.wstl-customers-page .wstl-segment-filters a.current {
	background: #eaeff6;
	border-color: transparent;
	color: var(--cust-ink);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px rgba(20, 40, 67, 0.06);
}
.wstl-customers-page .wstl-segment-filters a.current::before { box-shadow: 0 0 0 3px rgba(20, 40, 67, 0.04); }
.wstl-customers-page .wstl-segment-filters a .count {
	font-size: 11px;
	color: var(--cust-faint);
	font-variant-numeric: tabular-nums;
}
.wstl-customers-page .wstl-segment-filters a.current .count { color: var(--cust-muted); }
.wstl-customers-page .wstl-segfilter-vip::before { background: var(--wstl-segment-vip); }
.wstl-customers-page .wstl-segfilter-trusted::before { background: var(--wstl-segment-trusted); }
.wstl-customers-page .wstl-segfilter-normal::before { background: var(--wstl-segment-normal); }
.wstl-customers-page .wstl-segfilter-caution::before { background: var(--wstl-segment-caution); }
.wstl-customers-page .wstl-segfilter-risk::before { background: var(--wstl-segment-risk); }
.wstl-customers-page .wstl-segfilter-critical::before { background: var(--wstl-segment-critical); }

/* ---- Advanced filter bar ---- */
.wstl-customers-page .wstl-customers-filters {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/* Full-bleed divider across the padded panel separating slice from refine. */
	margin: 2px -12px 0;
	padding: 14px 12px 2px;
	border-top: 1px solid var(--cust-line);
}
.wstl-customers-page .wstl-customers-filters .button-primary { margin-left: auto; }
.wstl-customers-page .wstl-filter-search {
	flex: 1 1 200px;
	max-width: 280px;
	height: 34px;
	border: 1px solid #dbe3ec;
	border-radius: 8px;
	font-size: 13px;
	padding: 0 12px;
	background: #fff;
}
.wstl-customers-page .wstl-filter-field {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #dbe3ec;
	border-radius: 8px;
}
.wstl-customers-page .wstl-filter-label { font-size: 12px; font-weight: 500; color: var(--cust-muted); white-space: nowrap; }
.wstl-customers-page .wstl-num {
	width: 44px;
	height: 24px;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 12.5px;
	padding: 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
.wstl-customers-page .wstl-num::-webkit-outer-spin-button,
.wstl-customers-page .wstl-num::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.wstl-customers-page .wstl-num:focus {
	outline: 2px solid var(--cust-accent);
	outline-offset: 1px;
	border-radius: 3px;
}
.wstl-customers-page .wstl-dash { color: #aab6c4; }
.wstl-customers-page .wstl-filter-status {
	height: 34px;
	border: 1px solid #dbe3ec;
	border-radius: 8px;
	font-size: 12.5px;
	background: #fff;
}
.wstl-customers-page .wstl-filter-clear { font-size: 12.5px; color: #8493a3; text-decoration: none; white-space: nowrap; }
.wstl-customers-page .wstl-filter-clear:hover { color: #c0392b; text-decoration: underline; }

/* ---- Bulk actions: toolbar fused to the top of the table card ---- */
.wstl-customers-page .wstl-customers-actions {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 9px 14px;
	background: #fcfdfe;
	border: 1px solid var(--cust-line);
	border-bottom: 1px solid var(--cust-line);
	border-radius: 12px 12px 0 0;
	box-shadow: none;
	min-height: 0;
}
.wstl-customers-page .wstl-customers-actions::after { content: none; }
.wstl-customers-page .wstl-customers-actions .actions { display: flex; align-items: center; gap: 8px; padding: 0; }
.wstl-customers-page .wstl-customers-actions select,
.wstl-customers-page .wstl-customers-actions .button { height: 32px; font-size: 12.5px; }
.wstl-customers-page .wstl-bulk-count {
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--cust-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.wstl-customers-page .wstl-bulk-count:empty { display: none; }

/* ---- Table: continues the toolbar into one fused card ---- */
.wstl-customers-page .wstl-customers-table-shell {
	background: #fff;
	border: 1px solid var(--cust-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	box-shadow: none;
	overflow: hidden;
}
.wstl-customers-page .wstl-customers-table-wrap { overflow-x: auto; }
.wstl-customers-page .wstl-customers-table {
	border: 0;
	box-shadow: none;
	margin: 0;
	width: 100% !important;
	min-width: 100%;
	table-layout: auto !important;
}
.wstl-customers-page .wstl-customers-table .wstl-col-28 { width: auto !important; }

/* Header row */
.wstl-customers-page .wstl-customers-table thead th,
.wstl-customers-page .wstl-customers-table thead td {
	background: #fcfdfe;
	border-bottom: 1px solid var(--cust-line);
	color: #8c9bab;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	padding: 12px 16px;
}
/* Hide the repeated footer header row for a cleaner, modern table */
.wstl-customers-page .wstl-customers-table tfoot { display: none; }

/* Body rows */
.wstl-customers-page .wstl-customers-table tbody td,
.wstl-customers-page .wstl-customers-table tbody th {
	background: #fff;
	border-bottom: 1px solid var(--cust-line-soft);
	padding: 13px 16px;
	vertical-align: middle;
	font-size: 13px;
	color: #46586b;
}
.wstl-customers-page .wstl-customers-table tbody tr:last-child td,
.wstl-customers-page .wstl-customers-table tbody tr:last-child th { border-bottom: 0; }
.wstl-customers-page .wstl-customers-table tbody tr:hover td,
.wstl-customers-page .wstl-customers-table tbody tr:hover th { background: #f8fafc; }

/* Numeric columns: right-aligned, tabular */
.wstl-customers-page .wstl-customers-table thead th.column-score,
.wstl-customers-page .wstl-customers-table thead th.column-orders,
.wstl-customers-page .wstl-customers-table thead th.column-returns,
.wstl-customers-page .wstl-customers-table thead th.column-rate,
.wstl-customers-page .wstl-customers-table thead th.column-value,
.wstl-customers-page .wstl-customers-table tbody .column-score,
.wstl-customers-page .wstl-customers-table tbody .column-orders,
.wstl-customers-page .wstl-customers-table tbody .column-returns,
.wstl-customers-page .wstl-customers-table tbody .column-rate,
.wstl-customers-page .wstl-customers-table tbody .column-value {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.wstl-customers-page .wstl-customers-table thead th.sortable a,
.wstl-customers-page .wstl-customers-table thead th.sorted a {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: inherit;
}
.wstl-customers-page .wstl-customers-table thead th.column-score.sortable a,
.wstl-customers-page .wstl-customers-table thead th.column-orders.sortable a,
.wstl-customers-page .wstl-customers-table thead th.column-rate.sortable a,
.wstl-customers-page .wstl-customers-table thead th.column-value.sortable a {
	justify-content: flex-end;
	width: 100%;
}

/* Customer cell */
.wstl-customers-page .wstl-customers-table .column-customer a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cust-ink);
	text-decoration: none;
}
.wstl-customers-page .wstl-customers-table .column-customer a:hover { color: var(--cust-accent); }
.wstl-customers-page .wstl-customer-type { font-size: 11px; color: var(--cust-faint); }

/* Segment badge → minimal dot + label */
.wstl-customers-page .wstl-segment-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none !important;
	color: var(--cust-muted) !important;
	font-size: 11.5px;
	font-weight: 600;
	padding: 0 8px 0 0;
	border-radius: 0;
	letter-spacing: 0;
}
.wstl-customers-page .wstl-segment-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
	background: #c2cdda;
}
.wstl-customers-page .wstl-segment-badge.wstl-segment-vip::before { background: var(--wstl-segment-vip); }
.wstl-customers-page .wstl-segment-badge.wstl-segment-trusted::before { background: var(--wstl-segment-trusted); }
.wstl-customers-page .wstl-segment-badge.wstl-segment-normal::before { background: var(--wstl-segment-normal); }
.wstl-customers-page .wstl-segment-badge.wstl-segment-caution::before { background: var(--wstl-segment-caution); }
.wstl-customers-page .wstl-segment-badge.wstl-segment-risk::before { background: var(--wstl-segment-risk); }
.wstl-customers-page .wstl-segment-badge.wstl-segment-critical::before { background: var(--wstl-segment-critical); }

/* Score number, coloured by segment */
.wstl-customers-page .wstl-customers-table .column-score .wstl-score {
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.wstl-customers-page .wstl-score-vip { color: var(--wstl-segment-vip); }
.wstl-customers-page .wstl-score-trusted { color: var(--wstl-segment-trusted); }
.wstl-customers-page .wstl-score-normal { color: var(--wstl-segment-normal); }
.wstl-customers-page .wstl-score-caution { color: var(--wstl-segment-caution); }
.wstl-customers-page .wstl-score-risk { color: var(--wstl-segment-risk); }
.wstl-customers-page .wstl-score-critical { color: var(--wstl-segment-critical); }

/* Status badges (blocked / allowlist) — soft, minimal */
.wstl-customers-page .wstl-badge {
	font-size: 10px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 5px;
	letter-spacing: 0.02em;
	margin-left: 6px;
	vertical-align: middle;
}
.wstl-customers-page .wstl-badge-blocked { background: #fbe9eb; color: #b23a48; }
.wstl-customers-page .wstl-badge-allowlist { background: #e7f3ec; color: #1e7a46; }
.wstl-customers-page .wstl-badge-flagged { background: #fdf0e3; color: #b54708; }

/* Row actions */
.wstl-customers-page .column-actions .button {
	height: 28px;
	font-size: 12px;
	border-radius: 7px;
	color: #4a5b6e;
	border-color: #dbe3ec;
	background: #fff;
}
.wstl-customers-page .column-actions .button:hover { border-color: #c4d0e0; background: #f7f9fc; }

/* Pagination — minimal */
.wstl-customers-page .wstl-customers-pagination {
	margin-top: 14px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.wstl-customers-page .wstl-customers-pagination .displaying-num { color: var(--cust-muted); font-size: 12.5px; }

/* Responsive */
@media (max-width: 900px) {
	.wstl-customers-page .wstl-customers-toolbar { gap: 10px; }
}
@media (max-width: 782px) {
	.wstl-customers-page .wstl-filter-search { max-width: none; flex: 1 1 100%; }
}
