/* =========================================================
   Welcome Bonus (JSON) — styles spécifiques
   ========================================================= */

.title-badge {
	display: inline-block;
	font-size: 0.7em;
	font-weight: 600;
	padding: 0.15em 0.5em;
	margin-left: 0.4em;
	border-radius: 999px;
	background: var(--c-primary);
	color: white;
	vertical-align: middle;
}

/* Section JSON */
.wbj-json-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.wbj-json-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.wbj-label {
	font-weight: 600;
	color: var(--color-text);
}

.wbj-textarea {
	width: 100%;
	min-height: 100px;
	max-height: 240px;
	padding: 0.6rem 0.8rem;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.78rem;
	border: 1px solid var(--color-divider);
	border-radius: 8px;
	background: var(--color-bg);
	color: var(--color-text);
	resize: vertical;
}

.wbj-textarea:focus {
	outline: none;
	border-color: var(--c-primary);
}

.wbj-json-error {
	color: #c0392b;
	font-size: 0.85rem;
	margin: 0;
}

.wbj-paste-btn {
	font-size: 0.85rem;
	padding: 0.3rem 0.7rem;
}

/* Sélection d'événements */
.wbj-events-card {
	border: 1px solid var(--color-divider);
	border-radius: 10px;
	padding: 0.9rem 1rem;
	background: var(--color-bg);
	margin-bottom: 1rem;
}

.wbj-events-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.wbj-events-title {
	font-weight: 600;
	font-size: 0.95rem;
}

.wbj-events-count {
	font-size: 0.8rem;
	color: var(--color-text-muted, #888);
}

.wbj-events-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-height: 280px;
	overflow-y: auto;
}

.wbj-event-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;
}

.wbj-event-row:hover {
	background: var(--color-bg-alt, #f6f6f6);
}

.wbj-event-row input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

.wbj-event-row.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wbj-event-row.disabled:hover {
	background: transparent;
}

.wbj-event-name {
	font-size: 0.9rem;
	flex: 1;
}

.wbj-event-meta {
	font-size: 0.75rem;
	color: var(--color-text-muted, #888);
}

.wbj-events-empty {
	font-size: 0.85rem;
	color: var(--color-text-muted, #888);
	margin: 0;
}

/* ─── v2 : sites bonus ─── */
.setbases-info {
	font-size: 0.78rem;
	color: var(--color-text-muted, #888);
	margin: 0.2rem 0 0;
	font-family: 'DM Mono', monospace;
}
.bonus-sites-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.bonus-site-row {
	display: grid;
	grid-template-columns: minmax(120px, 1.4fr) auto auto auto auto auto 32px;
	gap: 0.5rem;
	align-items: end;
	padding: 0.55rem 0.7rem;
	background: var(--color-surface-2);
	border: 1px solid var(--color-divider);
	border-radius: 8px;
}
.bs-name {
	padding: 0.3rem 0.55rem;
	font-weight: 600;
	font-size: 0.92rem;
	background: var(--color-surface);
	border-radius: 6px;
}
.bs-field { display: flex; flex-direction: column; gap: 0.15rem; }
.bs-field label {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted, #888);
}
.bs-field input, .bs-field select {
	padding: 0.3rem 0.4rem;
	font-family: 'DM Mono', monospace;
	font-size: 0.85rem;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 5px;
	color: var(--color-text);
	width: 92px;
}
.bonus-site-add {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.bonus-site-add select {
	flex: 1;
	padding: 0.4rem 0.55rem;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 6px;
	color: var(--color-text);
}

/* ─── v2 : set-card (détail d'une partition) ─── */
.set-card {
	background: var(--color-surface-2);
	border: 1px solid var(--color-divider);
	border-radius: 10px;
	padding: 0.8rem 1rem;
	margin-bottom: 0.8rem;
}
.set-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 0.7rem;
}
.set-card-title { font-weight: 600; font-size: 0.95rem; }
.set-card-meta {
	font-size: 0.74rem;
	color: var(--color-muted, #888);
	margin-top: 0.2rem;
}
.set-card-gain { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ─── v2 : tags Back / Lay / Bonus ─── */
.tag {
	display: inline-block;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.05em 0.45em;
	border-radius: 4px;
	vertical-align: middle;
	margin-left: 0.35em;
}
.tag-back  { background: var(--c-primary); color: #fff; }
.tag-lay   { background: #a07000; color: #fff; }
.tag-bonus { background: var(--color-pos, #2a7a4b); color: #fff; }

/* ─── Read-only odds cells (legacy v1, conservé pour compat) ─── */
.og-cell-readonly {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	font-variant-numeric: tabular-nums;
	font-size: 0.85rem;
	color: var(--color-text);
}

.og-cell-readonly.empty {
	color: var(--color-text-muted, #aaa);
}

/* ─── Breakdown table par set (gain/perte × issue) ─── */
.set-card .breakdown {
	margin-top: 14px;
	overflow-x: auto;
	border: 1px solid var(--color-divider);
	border-radius: 8px;
}
.breakdown-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}
.breakdown-table thead {
	background: var(--color-surface-2);
}
.breakdown-table th {
	padding: 10px 12px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--color-divider);
}
.breakdown-table th:first-child {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-text-muted);
	min-width: 160px;
}
.breakdown-table .th-outcome-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}
.breakdown-table .th-outcome-sub {
	font-size: 10.5px;
	color: var(--color-text-muted);
	font-weight: 400;
}
.breakdown-table tbody tr {
	border-bottom: 1px solid var(--color-divider);
}
.breakdown-table tbody tr:last-child { border-bottom: none; }
.breakdown-table td:first-child {
	padding: 10px 12px;
	border-right: 1px solid var(--color-divider);
	min-width: 160px;
}
.breakdown-table .site-name {
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 2px;
}
.breakdown-table .site-meta {
	font-size: 10.5px;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
.breakdown-table .td-outcome {
	padding: 8px 12px;
	text-align: left;
	vertical-align: top;
	min-width: 180px;
}
.breakdown-table .td-outcome.win  { background: color-mix(in srgb, var(--color-pos) 8%, transparent); }
.breakdown-table .td-outcome.lose { background: color-mix(in srgb, var(--color-neg) 4%, transparent); }
.detail-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 2px 0;
}
.detail-line.total-line {
	margin-top: 4px;
	padding-top: 5px;
	border-top: 1px solid var(--color-divider);
}
.detail-lbl {
	font-size: 10px;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.detail-val {
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
}
.detail-val.strong { font-size: 13px; font-weight: 600; }
.breakdown-table .total-row {
	background: var(--color-surface-2);
	font-weight: 600;
}
.breakdown-table .total-label .site-name {
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 13px;
}

.stake-card .stake-odds-net { color: var(--color-text-muted); font-size: 0.78em; margin-left: 0.3em; }
.stake-card .stake-liab {
	margin-top: 4px;
	font-size: 11px;
	color: var(--color-neg);
	font-variant-numeric: tabular-nums;
}