/* Avatar role barevné rozlišení */

/* Manager1 - Tmavě modrá (nejvyšší management) */
.avatar-role-manager1 {
  border: 3px solid #1e3a8a !important;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2) !important;
}

/* Manager2 - Area Sales Manager - Zelená */
.avatar-role-manager2 {
  border: 3px solid #059669 !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
}

/* Manager3 - Regional Sales Manager - Oranžová */
.avatar-role-manager3 {
  border: 3px solid #ea580c !important;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2) !important;
}

/* Manager4 - District Sales Manager - Fialová */
.avatar-role-manager4 {
  border: 3px solid #7c3aed !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2) !important;
}

/* Manager - Správce - Tyrkysová */
.avatar-role-manager {
  border: 3px solid #0891b2 !important;
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2) !important;
}

/* Uživatel - Světle modrá */
.avatar-role-user {
  border: 3px solid #0ea5e9 !important;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2) !important;
}

/* Admin - Červená */
.avatar-role-admin {
  border: 3px solid #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* Hover efekty pro lepší UX */
.navbar-dropdown-account-wrapper:hover .avatar-role-manager1 {
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.3) !important;
}

.navbar-dropdown-account-wrapper:hover .avatar-role-manager2 {
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.3) !important;
}

.navbar-dropdown-account-wrapper:hover .avatar-role-manager3 {
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.3) !important;
}

.navbar-dropdown-account-wrapper:hover .avatar-role-manager4 {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3) !important;
}

.navbar-dropdown-account-wrapper:hover .avatar-role-manager {
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.3) !important;
}

.navbar-dropdown-account-wrapper:hover .avatar-role-user {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3) !important;
}

.navbar-dropdown-account-wrapper:hover .avatar-role-admin {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}

/* Transition pro hladké přechody */
.avatar {
  transition: all 0.2s ease-in-out;
}