/* Module: User Roles – CSS */

/* ── Role badge in sidebar ────────────────────────────────── */
.user-role-badge {
	display: inline-block;
	padding: 2px var(--sp-2);
	border-radius: var(--radius-pill);
	font-size: 10px;
	font-weight: var(--weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.role-badge--admin      { background: rgba(255,255,255,0.2); color: var(--text-inverted); }
.role-badge--partner    { background: rgba(99,102,241,0.25); color: #a5b4fc; }
.role-badge--subscriber,
.role-badge--guest      { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }

/* ── Admin: role tag in user list ────────────────────────────*/
.retailored-role-tag {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	background: var(--color-indigo-light);
	color: var(--color-indigo);
}

/* ── Edit My Info page ─────────────────────────────────────── */
.ea-footer {
	padding: var(--sp-6) 0 var(--sp-1);
	display: flex;
	justify-content: flex-end;
}
.ea-feedback {
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	margin-bottom: var(--sp-4);
}
.ea-feedback--ok {
	background: var(--color-green-light);
	color: var(--color-green-dark);
}
.ea-feedback--error {
	background: var(--color-red-light);
	color: var(--color-red);
}

/* ── Multi-select fix (operating countries) ────────────────── */
select.form-input[multiple] {
	height: auto !important;
	min-height: 140px;
	overflow-y: auto;
	appearance: auto;
	-webkit-appearance: listbox;
}

.form-hint {
	display: block;
	font-size: var(--text-2xs);
	color: var(--text-muted);
	margin-top: 6px;
}

/* ── Company name tag in admin users list ──────────────────── */
.retailored-company-tag {
	display: inline-block;
	padding: 2px var(--sp-2);
	border-radius: var(--sp-1);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	background: var(--color-blue-light);
	color: var(--color-blue-dark);
}