/*
 * Interface corrections.
 *
 * Loaded after the squad and prediction stylesheets so these win on cascade
 * order rather than by escalating specificity. Each block notes the problem it
 * solves so a later change does not quietly undo it.
 */

/* ==========================================================================
   1. One delete button, not eleven
   --------------------------------------------------------------------------
   The remove control was revealed by :hover. Touch devices emulate hover on
   tap and hold it there, so after interacting with the board every token kept
   its × visible. Hover is now gated behind a real pointer, and the button is
   otherwise tied to the selected token only.
   ========================================================================== */

.nbpl-slot .nbpl-slot-remove {
	display: none;
}

/* Only devices with a true hovering pointer get the hover affordance. */
@media (hover: hover) and (pointer: fine) {
	.nbpl-slot.nbpl-filled:hover .nbpl-slot-remove {
		display: flex;
	}
}

/* On every device, the selected token shows its own remove control. */
.nbpl-slot.nbpl-slot-selected .nbpl-slot-remove,
.nbpl-slot.nbpl-filled.nbpl-slot-selected .nbpl-slot-remove {
	display: flex;
}

/* Anchor it to the shirt rather than the slot box, so it sits on the token
   instead of floating above and to the right of it. */
.nbpl-slot .nbpl-slot-remove {
	top: -6px;
	right: 50%;
	transform: translateX(calc(50% + 22px));
	width: 22px;
	height: 22px;
	background: var(--nb-red, #ED111F);
	border: 2px solid var(--nb-surface, #0E2039);
	font-size: 13px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   2. Status badges belong on the shirt
   --------------------------------------------------------------------------
   The badge was positioned against .nbpl-slot, which is considerably wider
   than the jersey inside it, so injury and card icons drifted out to the side.
   Anchoring to the centre and offsetting by half a token keeps them attached.
   ========================================================================== */

.nbpl-slot .nbpl-status-badge {
	top: -2px;
	right: 50%;
	transform: translateX(calc(50% + 20px));
	gap: 1px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}

.nbpl-slot .nbpl-status-icon {
	min-width: 15px;
	min-height: 15px;
	font-size: 11px;
	border: 1px solid rgba(0, 0, 0, .35);
}

/* When a token is selected the remove button takes the top-right corner, so
   move the status badge to the opposite side rather than stacking them. */
.nbpl-slot.nbpl-slot-selected .nbpl-status-badge {
	right: auto;
	left: 50%;
	transform: translateX(calc(-50% - 20px));
}

/* ==========================================================================
   3. Form controls were falling through to browser defaults
   --------------------------------------------------------------------------
   Only .nbpl-formation-select carried styling. The match and opponent selects,
   the handle input and the search field inherited the browser default of white
   background with black text, which reads as a blank white box on a dark
   board. This styles every control in one place.
   ========================================================================== */

.nbpl-wrap select,
.nbpl-wrap input[type="text"],
.nbpl-wrap input[type="search"],
.nbpl-wrap input[type="number"],
.nbpl-wrap input[type="email"],
.nbpl-wrap input[type="url"],
.nbpl-squad select,
.nbpl-squad input[type="text"],
.nbpl-squad input[type="search"],
.nb-pred-wrap select,
.nb-pred-wrap input[type="text"],
.nb-pred-wrap input[type="search"],
.nb-pred-wrap input[type="number"] {
	background: var(--nb-surface-raised, #16263C);
	color: var(--nb-text, #E8ECF3);
	border: 1px solid var(--nb-line, #24384F);
	border-radius: var(--nb-radius-sm, 8px);
	padding: 11px 14px;
	font-family: var(--nb-font-body, 'Inter', sans-serif);
	font-size: var(--nb-input-size, 16px);
	line-height: 1.3;
	min-height: var(--nb-tap-comfort, 48px);
	box-sizing: border-box;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
}

/* Native select arrow disappears with appearance:none, so draw one. */
.nbpl-wrap select,
.nbpl-squad select,
.nb-pred-wrap select {
	background-image: linear-gradient(45deg, transparent 50%, var(--nb-text-muted, #8FA2BA) 50%),
	                  linear-gradient(135deg, var(--nb-text-muted, #8FA2BA) 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 38px;
	cursor: pointer;
}

/* The dropdown list itself is painted by the OS and needs explicit colours,
   or it renders as white-on-white in several browsers. */
.nbpl-wrap select option,
.nbpl-squad select option,
.nb-pred-wrap select option {
	background: #16263C;
	color: #E8ECF3;
}

.nbpl-wrap input::placeholder,
.nbpl-squad input::placeholder,
.nb-pred-wrap input::placeholder {
	color: var(--nb-text-muted, #8FA2BA);
	opacity: 1;
}

.nbpl-wrap select:focus,
.nbpl-wrap input:focus,
.nbpl-squad select:focus,
.nbpl-squad input:focus,
.nb-pred-wrap select:focus,
.nb-pred-wrap input:focus {
	outline: none;
	border-color: var(--nb-gold, #C9A227);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

/* ==========================================================================
   4. Control rows line up
   --------------------------------------------------------------------------
   Formation, match selection and the export action sat on separate rows at
   inconsistent widths. This puts them on one grid that collapses cleanly.
   ========================================================================== */

.nbpl-squad-controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--nb-space-3, 12px);
	align-items: end;
}

.nbpl-squad-controls label,
.nbpl-squad-field label {
	display: block;
	margin-bottom: var(--nb-space-2, 8px);
	font-family: var(--nb-font-mono, monospace);
	font-size: var(--nb-text-xs, 12px);
	font-weight: 700;
	letter-spacing: var(--nb-tracking-label, .08em);
	text-transform: uppercase;
	color: var(--nb-text-muted, #8FA2BA);
}

@media (max-width: 480px) {
	.nbpl-squad-controls {
		grid-template-columns: 1fr;
	}
}