/* ============================================================
   Floral Maison · 后台专属「森林」主题（admin-forest）
   —— 方案 C「林间小筑」：暖米白 + 草绿 + 原木色
   作用域：仅当 <html> 带 class "admin-mode" 时生效（auth-fix.js
   在 /admin 路由下自动添加），前台商城完全不受影响。
   吉祥物为通用森林动物（松鼠/蘑菇），无版权风险。
   ============================================================ */

/* ---------- 1. 主题色变量（覆盖 Element Plus 主色为草绿） ---------- */
html.admin-mode {
  --el-color-primary: #639922;
  --el-color-primary-light-3: #8db84e;
  --el-color-primary-light-5: #b5d98a;
  --el-color-primary-light-7: #d9ecc4;
  --el-color-primary-light-8: #e8f3d9;
  --el-color-primary-light-9: #f3f9ea;
  --el-color-primary-dark-2: #4a7d18;
  --el-border-radius-base: 10px;
  --el-border-radius-small: 8px;
  --el-border-radius-round: 999px;
  --fm-green: #639922;
  --fm-green-deep: #3b6d11;
  --fm-green-title: #27500a;
  --fm-wood: #ba7517;
  --fm-wood-deep: #854f0b;
  --fm-cream: #fdf9f0;
  --fm-page: #f7f4ea;
}

/* 后台整体背景：暖米白 */
html.admin-mode body,
html.admin-mode #app {
  background: linear-gradient(135deg, #f7f4ea 0%, #f1ede0 100%) !important;
}
html.admin-mode .admin-layout {
  background: #f7f4ea !important;
}

/* ---------- 2. 顶栏 / 侧栏 ---------- */
html.admin-mode .main-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e3dcc8 !important;
  box-shadow: 0 2px 10px rgba(120, 100, 60, .06) !important;
}
html.admin-mode .layout-sidebar[data-v-170b18d9] {
  background: linear-gradient(180deg, #fdf9f0 0%, #f7f1e3 100%) !important;
  position: relative;
}
html.admin-mode .sidebar-header[data-v-170b18d9],
html.admin-mode .sidebar-footer[data-v-170b18d9] {
  border-color: #eae2ce !important;
}

/* 侧栏菜单 */
html.admin-mode .nav-item[data-v-170b18d9] {
  color: #6b6a5e !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}
html.admin-mode .nav-item[data-v-170b18d9]:hover {
  color: #3b6d11 !important;
  background: #eaf3de !important;
}
html.admin-mode .nav-item.active[data-v-170b18d9] {
  color: #27500a !important;
  background: #eaf3de !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 #639922 !important;
}
html.admin-mode .logout-btn[data-v-170b18d9] {
  color: #8a8a7d !important;
}
html.admin-mode .logout-btn[data-v-170b18d9]:hover {
  color: #ffffff !important;
  background: #ba7517 !important;
}
html.admin-mode .logo-text[data-v-170b18d9] {
  color: #27500a !important;
  font-weight: 800 !important;
}

/* Element 菜单（兜底） */
html.admin-mode .el-menu-item,
html.admin-mode .el-sub-menu__title {
  color: #6b6a5e !important;
  border-radius: 10px !important;
  margin: 4px 10px !important;
}
html.admin-mode .el-menu-item:hover,
html.admin-mode .el-sub-menu__title:hover {
  background: #eaf3de !important;
  color: #3b6d11 !important;
}
html.admin-mode .el-menu-item.is-active {
  background: #eaf3de !important;
  color: #27500a !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 #639922 !important;
}

/* ---------- 3. 按钮：草绿渐变 ---------- */
html.admin-mode .el-button {
  border-radius: 999px !important;
}
html.admin-mode .el-button--primary {
  background: linear-gradient(135deg, #7cb52c, #4a7d18) !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(99, 153, 34, .3) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
html.admin-mode .el-button--primary:hover {
  background: linear-gradient(135deg, #639922, #3b6d11) !important;
  box-shadow: 0 8px 20px rgba(74, 125, 24, .38) !important;
  transform: translateY(-1px);
}
html.admin-mode .el-button:not(.el-button--primary) {
  border-color: #c9c2ae !important;
  color: #3b6d11 !important;
  background: #ffffff !important;
}
html.admin-mode .el-button:not(.el-button--primary):hover {
  background: #f3f9ea !important;
  border-color: #97c459 !important;
  color: #3b6d11 !important;
}

/* ---------- 4. 卡片 / 面板 ---------- */
html.admin-mode .el-card,
html.admin-mode .el-card.is-always-shadow,
html.admin-mode .fm-card,
html.admin-mode .fm-featured .fm-card {
  border-radius: 16px !important;
  border: 1px solid #e3dcc8 !important;
  box-shadow: 0 6px 20px rgba(120, 100, 60, .07) !important;
  background: #ffffff !important;
}
html.admin-mode .el-card__header {
  border-bottom: 1px solid #efe9da !important;
  color: #27500a !important;
  font-weight: 700 !important;
}
html.admin-mode .fm-card-title,
html.admin-mode .el-card__header .el-card__title {
  color: #27500a !important;
}
html.admin-mode .fm-card-count {
  background: #eaf3de !important;
  color: #3b6d11 !important;
}

/* ---------- 5. 表格：奶油表头 ---------- */
html.admin-mode .el-table {
  border-radius: 14px !important;
  overflow: hidden !important;
}
html.admin-mode .el-table th.el-table__cell,
html.admin-mode .main-content .table .el-table th.el-table__cell {
  background: #faeeda !important;
  color: #854f0b !important;
  font-weight: 700 !important;
}
html.admin-mode .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #fbf9f3 !important;
}
html.admin-mode .el-table td.el-table__cell {
  border-bottom: 1px solid #f0ebdd !important;
}
html.admin-mode .el-table .el-table__row:hover > td.el-table__cell {
  background: #f3f9ea !important;
}

/* ---------- 6. 标签 / 标记 ---------- */
html.admin-mode .el-tag {
  border-radius: 999px !important;
}
html.admin-mode .el-tag--success,
html.admin-mode .fm-tag-ok {
  background: #eaf3de !important;
  color: #3b6d11 !important;
  border-color: #c0dd97 !important;
}
html.admin-mode .el-tag--warning {
  background: #faeeda !important;
  color: #854f0b !important;
  border-color: #fac775 !important;
}

/* ---------- 7. 输入框 / 表单 ---------- */
html.admin-mode .el-input__wrapper,
html.admin-mode .el-textarea__inner,
html.admin-mode .el-select__wrapper {
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px #d8d0bc inset !important;
}
html.admin-mode .el-input__wrapper.is-focus,
html.admin-mode .el-textarea__inner:focus,
html.admin-mode .fm-search:focus,
html.admin-mode .fm-pagejump:focus {
  box-shadow: 0 0 0 2px #97c459 inset !important;
}
html.admin-mode .fm-search,
html.admin-mode .fm-pagejump {
  border-radius: 12px !important;
}

/* ---------- 8. 分页 ---------- */
html.admin-mode .el-pagination .el-pager li.is-active {
  background: #639922 !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}
html.admin-mode .el-pagination .el-pager li:hover {
  color: #4a7d18 !important;
}
html.admin-mode .pager-num.active {
  background: #639922 !important;
  border-color: #639922 !important;
  color: #ffffff !important;
}
html.admin-mode .main-content .table .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  background: linear-gradient(135deg, #7cb52c, #4a7d18) !important;
}

/* ---------- 9. 弹窗 ---------- */
html.admin-mode .el-dialog {
  border-radius: 20px !important;
}
html.admin-mode .el-dialog__title {
  color: #27500a !important;
  font-weight: 800 !important;
}
html.admin-mode .el-dialog__headerbtn:hover .el-dialog__close {
  color: #4a7d18 !important;
}

/* ---------- 10. 标签页 ---------- */
html.admin-mode .el-tabs__item.is-active {
  color: #4a7d18 !important;
  font-weight: 700 !important;
}
html.admin-mode .el-tabs__active-bar {
  background: #639922 !important;
}
html.admin-mode .el-tabs__item:hover {
  color: #639922 !important;
}

/* ---------- 11. 项目自定义后台样式（fm-*） ---------- */
html.admin-mode .fm-price {
  color: #3b6d11 !important;
}
html.admin-mode .fm-btn {
  border-radius: 10px !important;
  border-color: #e3dcc8 !important;
  color: #6b6a5e !important;
}
html.admin-mode .fm-btn:hover {
  border-color: #97c459 !important;
  color: #3b6d11 !important;
  background: #f3f9ea !important;
}
html.admin-mode .fm-row {
  border-bottom: 1px dashed #efe9da !important;
}
html.admin-mode .pd-model.active {
  border-color: #639922 !important;
  background: #f3f9ea !important;
  box-shadow: 0 2px 10px rgba(99, 153, 34, .15) !important;
}
html.admin-mode .pd-model.active .pd-model-name {
  color: #3b6d11 !important;
}
html.admin-mode .pd-model:hover {
  border-color: #c0dd97 !important;
}

/* ---------- 12. 滚动条 ---------- */
html.admin-mode ::-webkit-scrollbar-thumb {
  background: #c0dd97 !important;
  border-radius: 999px !important;
}
html.admin-mode ::-webkit-scrollbar-track {
  background: #f3f9ea !important;
}

/* ---------- 13. 顶栏标题 / 管理员徽章 / 修改密码 ---------- */
html.admin-mode .breadcrumb {
  color: #27500a !important;
  font-weight: 600 !important;
}
html.admin-mode .avatar-sm {
  background: linear-gradient(135deg, #8db84e, #639922) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(99, 153, 34, .3) !important;
}
html.admin-mode .header-username {
  color: #3b6d11 !important;
  font-weight: 600 !important;
}
html.admin-mode .header-avatar svg {
  color: #3b6d11 !important;
}
html.admin-mode .change-pwd-btn {
  color: #3b6d11 !important;
  background: #eaf3de !important;
  border: 1px solid #c0dd97 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
html.admin-mode .change-pwd-btn:hover {
  background: #c0dd97 !important;
  color: #27500a !important;
}
html.admin-mode .change-pwd-btn svg {
  color: #3b6d11 !important;
}
html.admin-mode .main-content .table .el-button--primary {
  background: linear-gradient(135deg, #7cb52c, #4a7d18) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(99, 153, 34, .3) !important;
}
html.admin-mode .main-content .table .container {
  border-radius: 16px !important;
  border-color: #e3dcc8 !important;
  box-shadow: 0 6px 20px rgba(120, 100, 60, .07) !important;
}

/* ---------- 14. 中央半透明大松鼠水印（抱橡果，通用森林动物） ---------- */
html.admin-mode body::after {
  content: "";
  position: fixed;
  left: 46%;
  top: 50%;
  width: 60vmin;
  height: 60vmin;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../admin-cat.jpg");
}

/* ---------- 15. 侧栏底部小松鼠 + 蘑菇（林间小筑） ---------- */
html.admin-mode .layout-sidebar[data-v-170b18d9]::after {
  content: "";
  position: absolute;
  left: auto;
  right: 12px;
  bottom: 12px;
  width: 60px;
  height: 60px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #f3e9d2, 0 4px 10px rgba(120,100,60,.18);
  background-color: #fdf9f0;
  background-image: url("../admin-cat.jpg");
}

/* ---------- 16. 左上角 LOGO：地天泰卦象（上坤☷ 下乾☰，草绿底） ---------- */
html.admin-mode .logo-icon[data-v-170b18d9] {
  border-radius: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' fill='%23ffffff'><rect x='4' y='1' width='6.6' height='2.4' rx='1.2'/><rect x='13.4' y='1' width='6.6' height='2.4' rx='1.2'/><rect x='4' y='5.2' width='6.6' height='2.4' rx='1.2'/><rect x='13.4' y='5.2' width='6.6' height='2.4' rx='1.2'/><rect x='4' y='9.4' width='6.6' height='2.4' rx='1.2'/><rect x='13.4' y='9.4' width='6.6' height='2.4' rx='1.2'/><rect x='4' y='13.6' width='16' height='2.4' rx='1.2'/><rect x='4' y='17.8' width='16' height='2.4' rx='1.2'/><rect x='4' y='22' width='16' height='2.4' rx='1.2'/></svg>"), linear-gradient(135deg, #7cb52c 0%, #4a7d18 100%) !important;
  background-size: 58%, cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 4px 12px rgba(99, 153, 34, .35);
}
html.admin-mode .logo-icon[data-v-170b18d9] svg {
  display: none !important;
}

/* ---------- 17. 侧栏菜单图标：统一绿叶子（隐藏原文档图标） ---------- */
html.admin-mode .nav-icon[data-v-170b18d9] {
  width: 20px;
  height: 20px;
}
html.admin-mode .nav-icon[data-v-170b18d9] svg {
  display: none !important;
}
html.admin-mode .nav-icon[data-v-170b18d9]::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 L12 15.5' stroke='%238db84e' stroke-width='1.8' stroke-linecap='round' fill='none'/><path d='M12 15.5 C6 13.5 3 9 4 4 C9 2 16 2 19 4 C20 9 17 13.5 12 15.5 Z' fill='%238db84e'/></svg>");
}
html.admin-mode .nav-item.active[data-v-170b18d9] .nav-icon[data-v-170b18d9]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22 L12 15.5' stroke='%23639922' stroke-width='1.8' stroke-linecap='round' fill='none'/><path d='M12 15.5 C6 13.5 3 9 4 4 C9 2 16 2 19 4 C20 9 17 13.5 12 15.5 Z' fill='%23639922'/></svg>");
}