@charset "utf-8";
/* =====================================================
   Admin 框架布局 v3 —— 借鉴 yp_admin 主后台成熟控制台布局
   （55px 白顶栏 + 顶栏 L1 横排 + 232px 左侧二三级树侧栏）
   ────────────────────────────────────────────
   结构同构 yp_admin 主后台（admin-morandi 主题）：
   ① 一级菜单横排文字导航，选中 = 深金字 + 3px 品牌金下标；
   ② 侧栏二级项 = 40px 药丸（4px 上下距、12px 侧距、8px 圆角）；
   ③ 三级项 = 缩进 + 圆点导引，与二级同一选中语言：
      浅金底 + 3px 左金条 + 深金字（全站菜单统一视觉）。
   本文件必须在 admin-theme.css 之后加载。
   ===================================================== */

/* ====== 顶栏 ====== */
.layui-layout-admin .layui-header {
  height: 55px;
  z-index: 99999;
  background-color: #FFFFFF;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(27, 22, 11, 0.04);
}
/* ====== 顶栏 logo 区：方标 + 品牌名（yp_admin 主后台同构） ====== */
.layui-layout-admin .layui-logo {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 206px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px 0 16px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 1px solid var(--line-2, #E8E4D6);
  line-height: normal;
}
.layui-layout-admin .layui-logo img {
  max-height: 30px;
  max-width: 32px;
  flex-shrink: 0;
}
.layui-layout-admin .layui-logo .ypui-logo-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1, #241E10);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====== 顶栏一级菜单（横排文字导航） ====== */
.layui-layout-admin .layui-nav .layui-nav-bar {
  display: none;
}
.layui-layout-admin .ypui-top-nav {
  margin-left: 206px;
  margin-right: 170px;
  height: 55px;
  background-color: transparent;
}
.layui-layout-admin .ypui-top-nav .layui-nav-item {
  line-height: 55px;
}
.layui-layout-admin .ypui-top-nav .layui-nav-item a {
  height: 55px;
  line-height: 55px;
  padding: 0 17px;
  color: var(--text-2, #57503F) !important;
  font-size: 14px;
  transition: color 0.15s ease;
}
.layui-layout-admin .ypui-top-nav .layui-nav-item a:hover {
  color: var(--gold-700, #8F6E1A) !important;
  background-color: transparent;
}
/* 选中：深金字加粗 + 3px 品牌金下标（接管 layui 的 .layui-this:after 指示条） */
.layui-layout-admin .ypui-top-nav .layui-nav-item.layui-this a {
  color: var(--gold-800, #5E4A12) !important;
  font-weight: 600;
}
.layui-layout-admin .ypui-top-nav .layui-this:after {
  height: 3px;
  background-color: var(--gold-300, #D4AF37);
  border-radius: 2px 2px 0 0;
}

/* ====== 右上账号区 ====== */
.layui-layout-admin .layui-layout-right {
  height: 55px;
  line-height: 55px;
}
.layui-layout-admin .layui-layout-right .layui-nav-more {
  border-top-color: #333;
}
.layui-layout-admin .layui-layout-right .layui-nav-mored {
  border-color: transparent transparent #333;
}
.layui-layout-admin .layui-layout-right .layui-nav-child {
  right: 0;
  left: unset;
}
.layui-layout-admin .layui-layout-right .layui-nav-child dd.layui-this,
.layui-layout-admin .layui-layout-right .layui-nav-child dd.layui-this a {
  background-color: #D4AF37;
  color: #17130A;
}

/* ====== 左侧二三级树侧栏（232px，白底） ====== */
.layui-layout-admin .ypui-side-nav {
  top: 55px;
  width: 232px !important;
  background-color: var(--bg-card, #FFFFFF);
  border-right: 1px solid var(--line-2, #E8E4D6);
  overflow: hidden;
  box-sizing: border-box;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll {
  width: 252px;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-tree {
  width: 232px;
  background-color: transparent !important;
  position: relative;
  margin-top: 6px;
  padding-bottom: 14px;
}
/* 栏首：当前一级名（替代旧顶栏面包屑首级） */
.layui-layout-admin .ypui-side-title {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 24px 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1, #241E10);
  border-bottom: 1px solid var(--line-2, #E8E4D6);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}
/* 二级项：40px 药丸（morandi 轮子同构） */
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-tree .layui-nav-item {
  width: auto;
  background-color: transparent;
  line-height: normal;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-tree .layui-nav-item > a {
  display: block;
  height: 40px;
  line-height: 40px;
  margin: 4px 12px;
  padding: 0 30px 0 16px;
  border-radius: var(--radius-md, 8px);
  color: var(--text-2, #57503F) !important;
  font-size: 14px;
  box-sizing: border-box;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-tree .layui-nav-item > a span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-tree .layui-nav-item > a:hover {
  background-color: var(--bg-hover, #F3EDDC) !important;
  color: var(--gold-700, #8F6E1A) !important;
}
/* 选中二级（叶子）：浅金底 + 3px 左金条 + 深金字 */
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-tree > .layui-this > a,
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-tree > .layui-this > a.second-selecte-nav {
  background-color: var(--gold-50, #FBF7EA) !important;
  color: var(--gold-800, #5E4A12) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold-300, #D4AF37);
}
/* 树态指示条（layui 默认绿条）全部禁用 */
.layui-layout-admin .ypui-side-nav .layui-nav .layui-this:after,
.layui-layout-admin .ypui-side-nav .layui-nav .layui-nav-itemed:after {
  width: 0;
}

/* 展开/收起箭头（morandi 轮子同构：收 ∨ / 展 ∧，选中组变金） */
.layui-layout-admin .ypui-side-nav .layui-nav .layui-nav-more {
  width: 7px;
  height: 7px;
  border-width: 1.5px;
  border-color: transparent var(--text-3, #97907D) var(--text-3, #97907D) transparent;
  border-style: solid;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top: 16px;
  right: 16px;
  margin-top: 0;
  opacity: 0.7;
  transition: all 0.2s ease;
}
.layui-layout-admin .ypui-side-nav .layui-nav-item:hover > a .layui-nav-more {
  border-color: transparent var(--text-2, #57503F) var(--text-2, #57503F) transparent;
  opacity: 1;
}
.layui-layout-admin .ypui-side-nav .layui-nav-itemed > a .layui-nav-more {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 14px;
  opacity: 1;
  border-color: transparent var(--gold-500, #B8912C) var(--gold-500, #B8912C) transparent;
}

/* 三级项：缩进 + 圆点导引（morandi 轮子同构） */
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child {
  position: relative;
  background-color: transparent !important;
  padding: 2px 0 6px;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd {
  background-color: transparent !important;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd > a {
  display: block;
  position: relative;
  height: 34px;
  line-height: 34px;
  margin: 2px 12px;
  padding: 0 12px 0 34px;
  border-radius: var(--radius-md, 8px);
  color: var(--text-2, #57503F) !important;
  font-size: 13px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd > a::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-3, #97907D);
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  transition: background-color 0.2s ease;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd > a:hover {
  background-color: var(--bg-hover, #F3EDDC) !important;
  color: var(--gold-700, #8F6E1A) !important;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd > a:hover::after {
  background-color: var(--gold-500, #B8912C);
}
/* 选中三级：与二级同一选中语言 */
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd.layui-this {
  background-color: transparent !important;
}
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd.layui-this a {
  background-color: var(--gold-50, #FBF7EA) !important;
  color: var(--gold-800, #5E4A12) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold-300, #D4AF37);
}
/* 选中三级：圆点让位于左竖条（morandi 轮子：圆点 → 竖条） */
.layui-layout-admin .ypui-side-nav .layui-side-scroll .layui-nav-child dd.layui-this a::after {
  background-color: transparent;
}

/* ====== 面包屑条（固定，部分页面使用） ====== */
.layui-layout-admin .ypui-crumbs {
  position: fixed;
  top: 60px;
  left: 232px;
  z-index: 9999;
  right: 0;
  height: 43px;
  line-height: 43px;
  padding: 0 28px;
  background-color: #fff;
  border-bottom: 1px solid #f1f1f1;
}
.layui-layout-admin .ypui-crumbs a:hover {
  color: #D4AF37 !important;
}

/* ====== 内容区 ====== */
.layui-layout-admin .layui-body {
  position: absolute;
  overflow: auto !important;
  top: 55px;
  bottom: 0;
  left: 232px;
  background-color: var(--bg-page, #F4F1E8);
}
/* 无二级菜单的页面（如面板）不显示侧栏，内容区通铺 */
.layui-layout-admin .layui-body.child_no_exit {
  left: 0;
}
/* 内容大卡：白底 e1 海拔 + 大圆角，与画布的半档明度差构成第一层内容层次 */
.layui-layout-admin .layui-body .ypui-body-content {
  min-width: 1000px;
  min-height: 650px;
  padding: 20px;
  margin: 16px;
  background-color: #fff;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--e1, 0 1px 3px rgba(27, 22, 11, 0.08));
}

/* ====== 页头（PageContainer 模式：面包屑末级 → 页标题，模板可覆盖） ====== */
.layui-layout-admin .ypui-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}
.layui-layout-admin .ypui-page-header .ypui-page-title {
  margin: 0;
  font-size: var(--fs-20, 20px);
  font-weight: 600;
  line-height: 28px;
  color: var(--text-1, #241E10);
  letter-spacing: 0.5px;
}
.layui-layout-admin .ypui-page-header .ypui-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ====== 顶栏账号头像圆点（用户名首字） ====== */
.ypui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E2C362, #B8933A);
  color: #17130A;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* ====== 四级导航 ====== */
.fourstage-nav .layui-tab-title {
  border: 0;
}
.fourstage-nav .layui-tab-title li {
  margin: 0 15px;
  padding: 0;
}
.fourstage-nav .layui-tab-title li::after {
  border: 0 !important;
}
.fourstage-nav .layui-tab-title li a {
  border-bottom: 2px solid #fff;
}
/* 兼容旧 common.css 的同名高优先级选择器 */
.layui-body .fourstage-nav ul li.layui-this a,
.fourstage-nav .layui-tab-title li.layui-this a {
  color: #B8912C;
  border-bottom: 2px solid #B8912C;
}
/* 抵消 admin-theme.css 通用 Tab 的金底药丸（四级导航保持下划线风格） */
.fourstage-nav .layui-tab-title li:hover {
  background-color: transparent !important;
}
.fourstage-nav .layui-tab-title li.layui-this {
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* ====== 顶栏账号盒 ====== */
.ypui-login-box {
  display: flex;
  align-items: center;
}
.ypui-login-box > div {
  position: relative;
}