/* ========================================================
 * cany_dianle 顶栏样式覆盖
 * 深色背景 #1E1E2D + 白色文字 + 蓝紫渐变高亮
 * 顶栏高度 81px (@1920 设计稿)
 * 左: 面包屑 / 右: 工具栏(语言/购物车/消息/用户)
 * ======================================================== */

/* ===== 顶栏容器 ===== */
.el-header,
.cany-header {
  background: var(--bg-dark, var(--color-menu-bg, #1e1e2d)) !important;
  height: var(--layout-header-height, 0.81rem) !important;
  line-height: var(--layout-header-height, 0.81rem) !important;
  padding: 0 24px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(30, 30, 45, 0.06);
  position: sticky;
  top: 0;
  z-index: 90;
  flex-shrink: 0;
  width: auto !important;
}

/* ===== 顶栏左侧 ===== */
.header-left,
.cany-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.header-left .menu-img {
  width: 20px;
  height: 20px;
  cursor: pointer;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.header-left .menu-img:hover {
  opacity: 1;
}
.header-left .left-img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
.header-left .el-autocomplete {
  width: 280px;
}
.header-left .el-autocomplete .el-input__inner {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: var(--radius-pill, 999px);
  height: 36px;
  line-height: 36px;
}
.header-left .el-autocomplete .el-input__inner:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-primary-light, var(--color-primary, #8fa9ff));
}
.header-left .el-autocomplete .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ===== 面包屑 (深色顶栏配色: 中间项浅灰, 末级白色加粗) ===== */
.cany-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.56);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cany-breadcrumb-item {
  color: rgba(255, 255, 255, 0.56);
  font-weight: 400;
  transition: color 0.2s;
  white-space: nowrap;
}
.cany-breadcrumb-item.is-clickable {
  cursor: pointer;
}
.cany-breadcrumb-item.is-clickable:hover {
  color: var(--color-primary-light);
}
.cany-breadcrumb-item.is-active {
  color: #ffffff;
  font-weight: 600;
  cursor: default;
}
.cany-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  margin: 0 2px;
  user-select: none;
}

/* ===== 顶栏右侧 ===== */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.header-right-item {
  display: flex;
  align-items: center;
  height: 100%;
  color: #ffffff;
}
.header-right-item.cloum-line-item {
  padding: 0 0.04rem;
}
.header-right-item .cloum-line {
  width: 1px;
  height: 0.2rem;
  background: rgba(255, 255, 255, 0.12);
}

/* 图标按钮 */
.header-right-item .right-item {
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.2s;
}
.header-right-item .right-item:hover {
  background: rgba(255, 255, 255, 0.12);
}
.header-right-item .right-item img {
  width: 0.25rem;
  height: 0.25rem;
  filter: brightness(0) invert(1);
}

/* 购物车角标 */
.header-right-item .el-badge {
  display: flex;
  align-items: center;
}
.header-right-item .el-badge__content {
  background: var(--gradient-brand, var(--color-primary, #6687fb));
  border: none;
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
}

/* 消息弹层 */
.top-msg-box {
  width: 3.2rem;
  max-width: 320px;
  padding: 0.12rem;
  border-radius: var(--radius-md, 12px);
}
.top-msg-box .msg-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.08rem 0.12rem;
  border-bottom: 1px solid var(--border-line, #ebeef5);
  font-size: 14px;
}
.top-msg-box .msg-top-left {
  color: var(--color-text-primary, #2d2f3b);
  font-weight: 600;
}
.top-msg-box .msg-top-right {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 12px;
}
.top-msg-box .msg-list {
  max-height: 3.6rem;
  overflow-y: auto;
  padding-top: 0.08rem;
}
.top-msg-box .msg-item {
  display: flex;
  gap: 0.12rem;
  padding: 0.12rem;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  transition: background 0.2s;
}
.top-msg-box .msg-item:hover {
  background: var(--bg-page, #f5f6f8);
}
.top-msg-box .msg-item-left {
  width: 0.32rem;
  height: 0.32rem;
  min-width: 0.32rem;
  border-radius: 50%;
  background: rgba(102, 135, 251, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-msg-box .msg-item-right {
  flex: 1;
  min-width: 0;
}
.top-msg-box .msg-item-right-top {
  font-size: 13px;
  color: var(--color-text-primary, #2d2f3b);
  font-weight: 500;
  margin-bottom: 0.04rem;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-msg-box .msg-item-right-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  gap: 0.08rem;
}
.top-msg-box .msg-item-right-bottom span:first-child {
  background: rgba(102, 135, 251, 0.08);
  color: var(--color-primary, #6687fb);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.top-msg-box .msg-item-right-bottom span:last-child {
  color: var(--color-text-placeholder, #bbbfc9);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 语言切换 */
.el-dropdown-country {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.lang-trigger-flag {
  width: 0.25rem !important;
  height: 0.2rem !important;
  border-radius: 0 !important;
  object-fit: cover;
  display: block;
  filter: none !important;
}

/* 未登录按钮 */
.header-right-item .un-login {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  color: #ffffff;
  cursor: pointer;
  padding: 0 0.16rem;
  height: 0.36rem;
  line-height: 0.36rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  transition: background 0.2s;
}
.header-right-item .un-login:hover {
  background: rgba(255, 255, 255, 0.12);
}
.header-right-item .un-login img {
  width: 0.18rem;
  height: 0.18rem;
  filter: brightness(0) invert(1);
}

/* 语言下拉项：国旗 + 文字 flex 横排 */
.el-dropdown-menu .el-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lang-flag-img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

/* 用户头像（图片版） */
.el-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  cursor: pointer;
}
.header-avatar-img {
  width: 0.46rem !important;
  height: 0.46rem !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  transition: border-color 0.2s;
}
.el-dropdown-header:hover .header-avatar-img {
  border-color: rgba(255, 255, 255, 0.5);
}
.header-username {
  font-size: 14px;
  color: #ffffff;
  max-width: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.el-dropdown-header .right-icon {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* 用户下拉菜单 */
.user-dropdown-menu {
  width: 136px !important;
  border-radius: 10px !important;
  box-shadow: 0px 4px 54px 0px rgba(34, 40, 64, 0.16) !important;
  padding: 6px 0 !important;
  overflow: hidden;
}
.user-dropdown-menu .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  color: #3d3d3d;
  line-height: 1.4;
}
.user-dropdown-menu .el-dropdown-menu__item i {
  font-size: 16px;
  color: #8892a6;
  flex-shrink: 0;
}
.user-dropdown-menu .el-dropdown-menu__item:hover {
  background: #f5f6f8;
  color: var(--color-primary, #6687fb);
}
.user-dropdown-menu .el-dropdown-menu__item:hover i {
  color: var(--color-primary, #6687fb);
}
.user-dropdown-menu .logout-item,
.user-dropdown-menu .logout-item i {
  color: #f56c6c !important;
}
.user-dropdown-menu .logout-item:hover {
  background: #fff5f5 !important;
}

/* ===== 抽屉菜单(移动端/窄屏回退) ===== */
.drawer-menu {
  background: var(--bg-dark, var(--color-menu-bg, #1e1e2d)) !important;
}
.drawer-menu-top {
  padding: 0.24rem 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.drawer-menu-logo {
  height: 0.32rem;
  width: auto;
  cursor: pointer;
}
.drawer-menu-list-top {
  padding: 0.12rem 0;
}
.drawer-menu-list-top .el-menu {
  border-right: none;
  background: transparent !important;
}
.drawer-menu-list-top .el-menu-item,
.drawer-menu-list-top .el-submenu__title {
  color: var(--color-menu-text) !important;
  background: transparent !important;
  height: 0.48rem;
  line-height: 0.48rem;
}
.drawer-menu-list-top .el-menu-item:hover,
.drawer-menu-list-top .el-submenu__title:hover {
  background: var(--color-menu-hover-bg) !important;
}
.drawer-menu-list-top .el-menu-item.is-active {
  background: var(
    --gradient-brand,
    var(--color-menu-active-bg, #6687fb)
  ) !important;
  color: var(--color-menu-text-active, #ffffff) !important;
  border-radius: var(--radius-pill, 999px);
  margin: 0 0.1rem;
  width: calc(100% - 0.2rem);
}
.drawer-menu-list-top .line {
  height: 1px;
  background: rgba(128, 128, 128, 0.16);
  margin: 0.12rem 0.2rem;
}

/* ===== 白色顶栏主题专用适配 (theme1 / theme8: 菜单背景 #fff) ===== */
:root[theme="theme1"] .el-header,
:root[theme="theme1"] .cany-header,
:root[theme="theme8"] .el-header,
:root[theme="theme8"] .cany-header {
  background: var(--color-menu-bg, #ffffff) !important;
  border-bottom: 1px solid var(--border-line, #ebeef5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* 顶栏左侧: 汉堡图标还原为深色 */
:root[theme="theme1"] .header-left .menu-img,
:root[theme="theme8"] .header-left .menu-img {
  filter: none;
  opacity: 0.5;
}
:root[theme="theme1"] .header-left .left-img,
:root[theme="theme8"] .header-left .left-img {
  filter: none;
  opacity: 0.5;
}
/* 搜索框: 改为浅色风格 */
:root[theme="theme1"] .header-left .el-autocomplete .el-input__inner,
:root[theme="theme8"] .header-left .el-autocomplete .el-input__inner {
  background: var(--bg-page, #f5f6f8);
  border-color: var(--border-line, #ebeef5);
  color: var(--color-text-primary, #2d2f3b);
}
:root[theme="theme1"]
  .header-left
  .el-autocomplete
  .el-input__inner::placeholder,
:root[theme="theme8"]
  .header-left
  .el-autocomplete
  .el-input__inner::placeholder {
  color: var(--color-text-placeholder, #bbbfc9);
}

/* 面包屑: 深色文字 */
:root[theme="theme1"] .cany-breadcrumb,
:root[theme="theme8"] .cany-breadcrumb {
  color: var(--color-text-tips, #8892a6);
}
:root[theme="theme1"] .cany-breadcrumb-item,
:root[theme="theme8"] .cany-breadcrumb-item {
  color: var(--color-text-tips, #8892a6);
}
:root[theme="theme1"] .cany-breadcrumb-item.is-clickable:hover,
:root[theme="theme8"] .cany-breadcrumb-item.is-clickable:hover {
  color: var(--color-primary);
}
:root[theme="theme1"] .cany-breadcrumb-item.is-active,
:root[theme="theme8"] .cany-breadcrumb-item.is-active {
  color: var(--color-text-primary, #2d2f3b);
}
:root[theme="theme1"] .cany-breadcrumb-sep,
:root[theme="theme8"] .cany-breadcrumb-sep {
  color: var(--color-text-placeholder, #bbbfc9);
}

/* 右侧工具栏: 改为深色图标+文字 */
:root[theme="theme1"] .header-right-item,
:root[theme="theme8"] .header-right-item {
  color: var(--color-text-regular, #5a5e6b);
}
:root[theme="theme1"] .header-right-item .cloum-line,
:root[theme="theme8"] .header-right-item .cloum-line {
  background: var(--border-line, #ebeef5);
}
:root[theme="theme1"] .header-right-item .right-item,
:root[theme="theme8"] .header-right-item .right-item {
  background: rgba(0, 0, 0, 0.04);
}
:root[theme="theme1"] .header-right-item .right-item:hover,
:root[theme="theme8"] .header-right-item .right-item:hover {
  background: rgba(0, 0, 0, 0.08);
}
:root[theme="theme1"] .header-right-item .right-item img,
:root[theme="theme8"] .header-right-item .right-item img {
  filter: none;
  opacity: 0.6;
}
:root[theme="theme1"] .header-right-item .un-login,
:root[theme="theme8"] .header-right-item .un-login {
  color: var(--color-text-regular, #5a5e6b);
  background: rgba(0, 0, 0, 0.04);
}
:root[theme="theme1"] .header-right-item .un-login:hover,
:root[theme="theme8"] .header-right-item .un-login:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-primary);
}
:root[theme="theme1"] .header-right-item .un-login img,
:root[theme="theme8"] .header-right-item .un-login img {
  filter: none;
  opacity: 0.6;
}
:root[theme="theme1"] .el-dropdown-country,
:root[theme="theme8"] .el-dropdown-country {
  color: var(--color-text-regular, #5a5e6b);
}
:root[theme="theme1"] .el-dropdown-country .right-icon,
:root[theme="theme8"] .el-dropdown-country .right-icon {
  color: var(--color-text-tips, #8892a6);
}
:root[theme="theme1"] .el-dropdown-header .right-icon,
:root[theme="theme8"] .el-dropdown-header .right-icon {
  color: var(--color-text-tips, #8892a6);
}