/* ==========================================================================
   头部用户信息布局优化
   修复用户名和退出登录按钮的对齐问题
   ========================================================================== */

/* 优化用户信息容器 - 分开并排排列的红框样式 */
.user-info {
  /* 使用更具体的选择器来避免与JavaScript冲突 */
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

/* 当用户信息容器不是隐藏状态时，使用flex布局 */
.user-info:not([style*="display: none"]),
.user-info[style*="display: block"] {
  display: flex !important;
}

/* 用户名显示区域优化 - 独立的左侧按钮样式 */
.user-info .user-info-display {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  max-width: 120px !important;
  padding: 6px 12px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e1e8ed !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

.user-info .user-info-display:hover {
  border-color: #1a73e8 !important;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.15) !important;
}

.user-info .user-info-display span {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: #333 !important;
  font-weight: 500 !important;
}

/* 退出登录按钮区域优化 - 独立的右侧按钮样式 */
.user-info .logout-section {
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

.user-info .btn-logout {
  font-size: 13px !important;
  padding: 6px 12px !important;
  min-width: auto !important;
  white-space: nowrap !important;
  border: 1px solid #ea4335 !important;
  border-radius: 6px !important;
  background: #ea4335 !important;
  color: white !important;
  margin: 0 !important;
  box-shadow: 0 2px 4px rgba(234, 67, 53, 0.2) !important;
  transition: all 0.3s ease !important;
}

.user-info .btn-logout:hover {
  background: #d33b2c !important;
  border-color: #d33b2c !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(234, 67, 53, 0.3) !important;
}

.user-info .btn-logout i {
  margin-right: 4px !important;
  font-size: 12px !important;
}

/* 管理员入口隐藏（已移到主导航） */
.user-info .admin-access {
  display: none !important;
}

/* 响应式优化 - 保持分开并排的红框效果 */
@media (max-width: 768px) {
  .user-info {
    gap: 6px !important;
  }
  
  .user-info .user-info-display {
    max-width: 90px !important;
    padding: 5px 10px !important;
  }
  
  .user-info .user-info-display span {
    font-size: 12px !important;
  }
  
  .user-info .btn-logout {
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
  
  .user-info .btn-logout .logout-text {
    display: none !important; /* 手机端隐藏"退出登录"文字，只保留图标 */
  }
}

@media (max-width: 480px) {
  .user-info {
    gap: 4px !important;
  }
  
  .user-info .user-info-display {
    max-width: 70px !important;
    padding: 4px 8px !important;
  }
  
  .user-info .btn-logout {
    padding: 4px 8px !important;
  }
}

/* 确保整体布局不被打破 */
.header-container {
  gap: 15px !important;
}

.user-menu {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}