/**
 * 汉典会员系统 - 帝国CMS原有类名兼容层
 * 将原有 .header, .tableborder 等类名映射到新的设计令牌
 * 保持向后兼容，不破坏现有模板结构
 */

/* ─── 原有 Empire CMS 类名映射 ─── */

/* 链接颜色 - 规范 3.2 */
a {
  color: var(--c-primary);
  text-decoration: none;
}

a:hover {
  color: var(--c-primary-dark);
  text-decoration: underline;
}

/* Header 样式 - 规范 3.2 */
.header {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-white);
  background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
  padding: var(--sp-sm) var(--sp-md);
}

.header a {
  color: var(--c-white-90);
}

.header a:hover {
  color: var(--c-white);
}

/* 表格边框 - 规范 3.3 */
.tableborder {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px var(--c-shadow);
}

.tableborder td,
.tableborder th {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-border-light);
  vertical-align: middle;
}

.tableborder tr:last-child td {
  border-bottom: none;
}

.tableborder tr:hover td {
  background: var(--c-surface-alt);
}

/* 单行边框 */
.singleborder {
  background: var(--c-surface-alt);
  line-height: 1px;
  padding: 0;
}

/* 类别/分类 */
.category {
  font-family: var(--ff-sans);
  color: var(--c-text);
  background: var(--c-surface-alt);
  padding: var(--sp-sm) var(--sp-md);
}

/* 外部文字 */
.outertxt {
  font-family: var(--ff-sans);
  color: var(--c-text);
}

.outertxt a {
  color: var(--c-primary);
}

/* 小文本 */
.smalltxt {
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
}

/* 加粗 */
.bold {
  font-weight: 700;
}

/* 导航 */
.nav {
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

.nav a {
  color: var(--c-primary);
}

/* ─── 分页样式 - 规范 3.7 ─── */
.epages {
  margin: var(--sp-md) 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.epages * {
  vertical-align: middle;
}

.epages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--sp-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  margin: 0;
  text-align: center;
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-surface);
  transition: all var(--transition-fast);
}

.epages a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--c-surface-alt);
  text-decoration: none;
}

.epages .dot {
  padding: 0 var(--sp-xs);
  border: none;
  background: transparent;
}

.epages input[type="submit"],
.epages input[type="button"] {
  height: 32px;
  padding: 0 var(--sp-sm);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
  background: var(--c-primary);
  color: var(--c-white);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.epages input[type="submit"]:hover,
.epages input[type="button"]:hover {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
}

/* ─── 表单元素兼容 - 规范 4.2 ─── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-sm) var(--sp-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--shadow-focus);
}

input::placeholder,
textarea::placeholder {
  color: var(--c-text-secondary);
}

input[type="radio"],
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-primary);
}

/* ─── 按钮兼容 - 规范 4.1 ─── */
input[type="submit"],
input[type="button"],
button {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c-white);
  background: var(--c-primary);
  border: 1px solid var(--c-primary);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background: var(--c-primary-dark);
  border-color: var(--c-primary-dark);
  transform: translateY(-1px);
}

input[type="submit"]:active,
input[type="button"]:active,
button:active {
  transform: translateY(0);
}

input[type="reset"] {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  color: var(--c-primary);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-sm) var(--sp-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

input[type="reset"]:hover {
  background: var(--c-surface-alt);
  border-color: var(--c-primary);
}

/* ─── 禁用状态 ─── */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  background: var(--c-surface-alt);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ─── 会员中心左侧导航菜单 ─── */
.zd-member-sidebar {
  width: 180px;
  flex-shrink: 0;
  padding: 0 !important;
  background: var(--c-surface) !important;
  vertical-align: top !important;
}

.zd-member-sidebar .tableborder {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-surface);
}

/* 菜单标题行 */
.zd-member-sidebar .header {
  padding: 8px 10px;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: #ffffff;
  background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
  cursor: pointer;
  user-select: none;
}

.zd-member-sidebar .header:hover {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));
}

.zd-member-sidebar .header td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle !important;
  height: auto !important;
}

/* 菜单图标和文字一行显示 */
.zd-member-sidebar .header td:first-child {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.zd-member-sidebar .header img {
  width: 14px;
  height: 8px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 菜单项 */
.zd-member-sidebar .tableborder td table td {
  height: auto !important;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border-light) !important;
  vertical-align: middle !important;
  background: var(--c-surface) !important;
}

.zd-member-sidebar .tableborder td table tr:last-child td {
  border-bottom: none !important;
}

.zd-member-sidebar .tableborder td table tr:hover td {
  background: var(--c-surface-alt) !important;
}

/* 单链接菜单项 - 链接占满整个单元格 */
.zd-member-sidebar .tableborder td table td:has(a:not(:last-child)) {
  padding: 0;
}

.zd-member-sidebar .tableborder td table td > a {
  display: block;
  width: 100%;
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding: 8px 10px;
  box-sizing: border-box;
}

.zd-member-sidebar .tableborder td table td > a:hover {
  color: var(--c-primary);
  text-decoration: none;
}

/* 两列布局的菜单项（如管理+发布） */
.zd-member-sidebar .tableborder td table tr:has(td > div) td {
  padding: 4px 8px;
}

.zd-member-sidebar .tableborder td table td > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.zd-member-sidebar .tableborder td table td > div a {
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.zd-member-sidebar .tableborder td table td > div a:hover {
  color: var(--c-primary);
  background: var(--c-surface-alt);
  text-decoration: none;
}

.zd-member-sidebar .tableborder td table td > div a:last-child {
  background: var(--c-primary);
  color: #ffffff;
}

.zd-member-sidebar .tableborder td table td > div a:last-child:hover {
  background: var(--c-primary-dark);
}

/* 移动端侧边栏 */
@media (max-width: 768px) {
  .zd-member-sidebar {
    width: 100%;
    margin-bottom: var(--sp-md);
  }
}

/* ─── 会员中心主内容区域 ─── */
.zd-member-main {
  padding: var(--sp-lg);
  min-height: 400px;
  background: var(--c-surface);
  vertical-align: top !important;
}

/* 会员页顶层布局容器（替代 page-layout，避免 grid 列序冲突） */
.zd-member-layout-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-lg);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-lg) var(--sp-md);
  box-sizing: border-box;
}

/* 移动端堆叠 */
@media (max-width: 900px) {
  .zd-member-layout-wrap {
    flex-direction: column;
    padding: var(--sp-md);
  }
}

/* 会员中心整体布局 */
.zd-member-layout {
  display: flex;
  gap: var(--sp-lg);
  align-items: flex-start;
}

@media (max-width: 768px) {
  .zd-member-layout {
    flex-direction: column;
  }
  
  .zd-member-main {
    width: 100%;
    padding: var(--sp-md);
  }
}

/* ─── 新 header/footer 对 page-layout 的适配 ─── */

/* 会员页不需要字典 aside 侧边栏，用 aside 来放折叠菜单 */
.zd-member-nav-aside {
  width: 200px;
  flex-shrink: 0;
  padding: var(--sp-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* 面包屑 */
.zd-member-breadcrumb {
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  padding: 0 0 var(--sp-sm);
  border-bottom: 1px solid var(--c-border-light);
  margin-bottom: var(--sp-sm);
  line-height: 1.6;
}
.zd-member-breadcrumb a {
  color: var(--c-text-secondary);
}
.zd-member-breadcrumb a:hover {
  color: var(--c-primary);
  text-decoration: underline;
}
.zd-member-breadcrumb__sep {
  margin: 0 4px;
  color: var(--c-border);
}

/* 已登录用户名+组名小卡片 */
.zd-member-nav-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--c-surface-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-light);
  margin-bottom: var(--sp-sm);
}
.zd-member-nav-user__name {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--c-text);
}
.zd-member-nav-user__group {
  font-size: var(--fs-xs);
  color: var(--c-primary);
}

/* 主内容区（新命名，避免与 .zd-member-main table 类名冲突） */
.zd-member-main-content {
  flex: 1;
  min-width: 0;
  padding: var(--sp-lg);
  background: var(--c-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-light);
  box-shadow: 0 2px 8px var(--c-shadow);
}

/* 移动端：侧边菜单折叠到顶部 */
@media (max-width: 900px) {
  .zd-member-nav-aside {
    width: 100%;
  }
  .zd-member-main-content {
    width: 100%;
  }
}

/* page-layout 在会员页的补充：不显示字典 aside 右侧边栏 */
body:has(.zd-member-nav-aside) .page-layout > aside.sidebar:not(.zd-member-nav-aside) {
  display: none;
}

/* ─── 左侧折叠菜单：图标行内化 + hover 颜色修复 ─── */

/* img 强制 inline，避免全局 display:block 导致图标换行 */
.zd-member-nav-aside .tableborder .header td img {
  display: inline !important;
  vertical-align: middle;
  width: 14px;
  height: 8px;
  margin-right: 4px;
}

/* 标题行文字默认白色 */
.zd-member-nav-aside .tableborder tr.header td {
  color: #fff !important;
  cursor: pointer;
  /* tr 不支持 background:hover，改在 td 上控制 */
  transition: background var(--transition-fast);
}

/* td hover：加亮背景，文字保持白色 */
.zd-member-nav-aside .tableborder tr.header td:hover {
  background: var(--c-primary-light) !important;
  color: #fff !important;
}

/* 标题行内的链接（如"退出"）白色，hover 变浅金 */
.zd-member-nav-aside .tableborder tr.header td a {
  color: #fff !important;
}
.zd-member-nav-aside .tableborder tr.header td a:hover {
  color: var(--c-accent-light, #E0CCA0) !important;
  text-decoration: underline;
}