/*
 * Vietnamese-ization polish cho khung Frappe (không sửa core).
 * Nạp qua hooks.py app_include_css / web_include_css để áp cho cả Desk lẫn Portal.
 *
 * Phần 1 — Avatar badge: Frappe render avatar bằng markup
 *   <span class="avatar avatar-*"><span class="avatar-frame standard-image">HV</span></span>
 * (xem templates/includes/avatar_macro.html + toolbar.js frappe.avatar()).
 * Mặc định đã tròn + nền xám nhạt, nhưng nhạt/nhỏ nên vẫn "lẫn" vào navbar — CSS
 * dưới đây nâng cấp thành badge tròn màu brand, chữ tương phản cao, có hover/focus.
 */

:root {
	--aiilab-avatar-bg: #1d4ed8; /* cobalt — hệ màu Poster (sáng) laptrinhvoiai, tương phản 6.7:1 với chữ trắng */
	--aiilab-avatar-bg-hover: #1e3a8a;
	--aiilab-avatar-color: #ffffff;
}

.avatar .avatar-frame.standard-image,
.avatar-frame.standard-image {
	background-color: var(--aiilab-avatar-bg) !important;
	color: var(--aiilab-avatar-color) !important;
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
		transform 0.15s ease;
}

/* Ảnh đại diện thật (không phải chữ viết tắt) vẫn giữ viền cho đồng bộ */
.avatar .avatar-frame.standard-image img,
.avatar img.avatar-frame {
	border-radius: 50%;
}

/* Nới rộng kích thước avatar trong navbar (website + desk) một chút cho cân đối */
.navbar .avatar.avatar-small,
.dropdown-navbar-user .avatar.avatar-small,
.nav-avatar .avatar.avatar-small,
li.logged-in .avatar.avatar-small {
	width: 34px !important;
	height: 34px !important;
}

.navbar .avatar.avatar-small .standard-image,
.dropdown-navbar-user .avatar.avatar-small .standard-image,
.nav-avatar .avatar.avatar-small .standard-image,
li.logged-in .avatar.avatar-small .standard-image {
	font-size: 13px !important;
}

/* Hover/focus: nút chứa avatar trên cả website navbar (.nav-link.nav-avatar) và
   desk navbar (.dropdown-navbar-user > button, .dropdown-toggle) */
.nav-link.nav-avatar,
.dropdown-navbar-user > .btn-reset,
.navbar .dropdown-toggle {
	cursor: pointer;
	border-radius: 50%;
	transition: box-shadow 0.15s ease;
}

.nav-link.nav-avatar:hover .avatar-frame.standard-image,
.nav-link.nav-avatar:focus-visible .avatar-frame.standard-image,
.dropdown-navbar-user > .btn-reset:hover .avatar-frame.standard-image,
.dropdown-navbar-user > .btn-reset:focus-visible .avatar-frame.standard-image,
.navbar .dropdown-toggle:hover .avatar-frame.standard-image,
.navbar .dropdown-toggle:focus-visible .avatar-frame.standard-image {
	background-color: var(--aiilab-avatar-bg-hover) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
	transform: translateY(-1px);
}

.nav-link.nav-avatar:focus-visible,
.dropdown-navbar-user > .btn-reset:focus-visible,
.navbar .dropdown-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.35);
}

/*
 * Phần 2 — Dropdown ngôn ngữ trên /update-profile (issue #9): JS
 * public/js/update-profile-language.js chèn 1 thẻ <select> cạnh input Language
 * gốc (Link field cốt lõi của Frappe). Style tối thiểu cho khớp control khác
 * của form web (không đụng core CSS).
 */
.aiilab-language-select {
	width: 100%;
	max-width: 100%;
}