/*
 * Values table front-end. Shares the same design tokens as the calculator
 * so both render as one system regardless of theme.
 */
.bf-values {
	--bf-bg: #12141c;
	--bf-surface: #1a1d29;
	--bf-surface-2: #232738;
	--bf-border: #2e3348;
	--bf-text: #e8eaf2;
	--bf-text-dim: #9aa0b5;
	--bf-accent: #6c5ce7;
	--bf-accent-2: #00cec9;
	--bf-win: #00b894;
	--bf-lose: #e17055;
	--bf-fair: #fdcb6e;
	--bf-radius: 12px;

	color: var(--bf-text);
	background: var(--bf-bg);
	border-radius: var(--bf-radius);
	padding: 16px;
	font-size: 15px;
	line-height: 1.5;
}

.bf-values *,
.bf-values *::before,
.bf-values *::after {
	box-sizing: border-box;
}

/* --- Controls --- */

.bf-values-controls {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}

@media (min-width: 640px) {
	.bf-values-controls {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.bf-values-search {
	background: var(--bf-surface-2);
	border: 1px solid var(--bf-border);
	border-radius: 8px;
	color: inherit;
	font: inherit;
	padding: 9px 12px;
	outline: none;
	width: 100%;
}

@media (min-width: 640px) {
	.bf-values-search {
		max-width: 260px;
	}
}

.bf-values-search:focus {
	border-color: var(--bf-accent);
}

.bf-values-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
}

.bf-values .bf-tab {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	background: var(--bf-surface-2);
	color: var(--bf-text-dim);
	border: 1px solid var(--bf-border);
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	white-space: nowrap;
}

.bf-values .bf-tab.is-active {
	background: var(--bf-accent);
	border-color: var(--bf-accent);
	color: #fff;
}

/* --- Table --- */

.bf-values-scroll {
	overflow-x: auto;
	border: 1px solid var(--bf-border);
	border-radius: 10px;
}

.bf-values-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
	margin: 0;
}

.bf-values-table thead th {
	background: var(--bf-surface);
	text-align: left;
	padding: 0;
	border-bottom: 1px solid var(--bf-border);
	white-space: nowrap;
}

.bf-values-table thead th.bf-num {
	text-align: right;
}

.bf-values-table thead th > button {
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bf-text-dim);
	background: none;
	border: none;
	cursor: pointer;
	padding: 12px 14px;
	width: 100%;
	text-align: inherit;
}

.bf-values-table thead th > button:hover {
	color: var(--bf-text);
}

.bf-values-table thead th > button.is-sorted {
	color: var(--bf-accent-2);
}

.bf-values-table thead th > button.is-sorted.is-desc::after {
	content: " ↓";
}

.bf-values-table thead th > button.is-sorted.is-asc::after {
	content: " ↑";
}

/* Non-sortable header (Updated) still needs matching padding */
.bf-values-table thead th:last-child {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--bf-text-dim);
	padding: 12px 14px;
}

.bf-values-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--bf-border);
	background: var(--bf-surface);
}

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

.bf-values-table tbody tr:hover td {
	background: var(--bf-surface-2);
}

.bf-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bf-cell-value {
	color: var(--bf-accent-2);
	font-weight: 700;
}

.bf-cell-updated {
	color: var(--bf-text-dim);
	font-size: 13px;
	white-space: nowrap;
}

.bf-col-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 180px;
}

.bf-col-item .bf-item-name {
	font-weight: 600;
}

.bf-item-thumb {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.bf-item-thumb-empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bf-border);
	color: var(--bf-text-dim);
	font-weight: 700;
}

/* --- Type badge + demand pill --- */

.bf-type-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	padding: 3px 10px;
	background: var(--bf-surface-2);
	border: 1px solid var(--bf-border);
	color: var(--bf-text-dim);
	white-space: nowrap;
}

.bf-type-fruit    { color: var(--bf-accent-2); border-color: var(--bf-accent-2); }
.bf-type-gamepass { color: var(--bf-accent);   border-color: var(--bf-accent); }
.bf-type-limited  { color: var(--bf-fair);     border-color: var(--bf-fair); }

.bf-demand {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	border-radius: 6px;
	padding: 2px 8px;
}

.bf-demand-high { color: var(--bf-win);  background: rgba(0, 184, 148, 0.12); }
.bf-demand-mid  { color: var(--bf-fair); background: rgba(253, 203, 110, 0.12); }
.bf-demand-low  { color: var(--bf-lose); background: rgba(225, 112, 85, 0.12); }

.bf-values-status {
	text-align: center;
	color: var(--bf-text-dim);
	padding: 24px 14px;
}