/* components/cabinet-avatar.css — аватар и бейдж роли кабинета. */

.cabinet-person-avatar {
	display: grid;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	place-items: center;
	border-radius: 12px;
	background: var( --highlight );
	color: var( --accent-strong );
	font-family: var( --font-display );
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
}

.cabinet-person-avatar--lg {
	width: 4.1rem;
	height: 4.1rem;
	border-radius: 16px;
	font-size: 1.25rem;
}

.cabinet-person-avatar[data-tone="0"] {
	background: color-mix( in srgb, var( --accent ) 18%, var( --surface ) );
	color: var( --accent-strong );
}

.cabinet-person-avatar[data-tone="1"] {
	background: color-mix( in srgb, var( --accent-rose ) 16%, var( --surface ) );
	color: var( --accent-rose );
}

.cabinet-person-avatar[data-tone="2"] {
	background: color-mix( in srgb, var( --orange ) 28%, var( --surface ) );
	color: #c45a18;
}

.cabinet-person-avatar[data-tone="3"] {
	background: var( --highlight );
	color: var( --accent-strong );
}

button.cabinet-person-avatar {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	appearance: none;
	cursor: pointer;
	font: inherit;
}

.cabinet-profile-card .cabinet-person-avatar--profile.cabinet-person-avatar--upload {
	border: 0;
}

.cabinet-person-avatar.has-photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: transparent;
	font-size: 0;
}

.cabinet-person-avatar--upload:hover,
.cabinet-person-avatar--upload:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 2px;
}

.cabinet-role-badge {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --accent ) 12%, var( --surface ) );
	color: var( --accent-strong );
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cabinet-role-badge[data-role="admin"] {
	background: color-mix( in srgb, var( --accent ) 18%, var( --surface ) );
	color: var( --accent-strong );
}

.cabinet-role-badge[data-role="supervisor"] {
	background: color-mix( in srgb, var( --accent ) 16%, var( --surface ) );
	color: var( --accent-strong );
}

.cabinet-role-badge[data-role="user"] {
	background: color-mix( in srgb, var( --orange ) 22%, var( --surface ) );
	color: #c45a18;
}

:root[data-theme="dark"] .cabinet-person-avatar[data-tone="2"],
:root[data-theme="dark"] .cabinet-role-badge[data-role="user"] {
	color: #f0b73a;
}

@media ( prefers-color-scheme: dark ) {
	:root:not( [data-theme="light"] ) .cabinet-person-avatar[data-tone="2"],
	:root:not( [data-theme="light"] ) .cabinet-role-badge[data-role="user"] {
		color: #f0b73a;
	}
}