/* ============================================================
   小清新 · 正念极简主题覆盖（Element Plus 2.x CSS 变量换肤）
   配色：鼠尾草绿 + 米白暖灰，柔和阴影、大圆角、松弛留白
   ============================================================ */

:root {
  /* 主色：鼠尾草绿 */
  --el-color-primary: #68a691;
  --el-color-primary-dark-2: #528a77;
  --el-color-primary-light-3: #8fbbaa;
  --el-color-primary-light-5: #aecdc2;
  --el-color-primary-light-7: #ccdfd8;
  --el-color-primary-light-8: #dce9e4;
  --el-color-primary-light-9: #ebf3f0;

  /* 功能色（低饱和化处理） */
  --el-color-success: #7cb08a;
  --el-color-warning: #d9b36c;
  --el-color-danger: #d1887f;
  --el-color-error: #d1887f;
  --el-color-info: #9aa5a0;

  /* 文字 */
  --el-text-color-primary: #37453e;
  --el-text-color-regular: #55645d;
  --el-text-color-secondary: #8a968f;
  --el-text-color-placeholder: #aeb8b2;
  --el-text-color-disabled: #c2cbc6;

  /* 边框与背景 */
  --el-border-color: #dde5e0;
  --el-border-color-light: #e4eae6;
  --el-border-color-lighter: #ebf0ec;
  --el-border-color-extra-light: #f1f5f2;
  --el-fill-color: #f2f6f3;
  --el-fill-color-light: #f6f9f7;
  --el-fill-color-lighter: #f9fbfa;
  --el-fill-color-blank: #ffffff;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f5f8f5;
  --el-bg-color-overlay: #ffffff;

  /* 圆角与字体 */
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 20px;
  --el-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* 柔和阴影 */
  --el-box-shadow: 0 4px 16px rgba(74, 94, 84, 0.08);
  --el-box-shadow-light: 0 2px 10px rgba(74, 94, 84, 0.05);
  --el-box-shadow-lighter: 0 1px 6px rgba(74, 94, 84, 0.04);
  --el-box-shadow-dark: 0 8px 24px rgba(74, 94, 84, 0.12);
}

/* ---------- 全局基调 ---------- */
body {
  background-color: #f5f8f5;
  color: #37453e;
  font-family: var(--el-font-family);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 登录页 ---------- */
.login-container {
  background: linear-gradient(160deg, #eef4ef 0%, #f7faf7 55%, #fdfcf8 100%) !important;
}
.login-card {
  border-radius: 18px !important;
  border: 1px solid #e7eee9;
  box-shadow: 0 12px 40px rgba(74, 94, 84, 0.10) !important;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}
.login-title {
  color: #3f5a4f !important;
  letter-spacing: 2px;
}
.login-subtitle {
  color: #93a29a !important;
}
.login-btn {
  border-radius: 10px !important;
  letter-spacing: 6px;
}

/* ---------- 布局框架（柔滑版） ---------- */
.layout-aside {
  background: linear-gradient(180deg, #fdfefd 0%, #f5f9f6 100%) !important;
  box-shadow: 1px 0 16px rgba(74, 94, 84, 0.05);
  transition: width 0.28s ease;
}
/* 左上角 logo 栏：去掉深色块，与侧栏融为一体 */
.layout-aside .logo {
  background: transparent !important;
  color: #52796b !important;
  letter-spacing: 3px;
  font-weight: 600;
  font-size: 19px;
  position: relative;
}
/* logo 下方一条极细的渐变分隔线（若隐若现） */
.layout-aside .logo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 58%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dce7e1, transparent);
}
/* 顶部标题栏：去硬边线，微渐变 + 柔和投影 */
.layout-header {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%) !important;
  backdrop-filter: blur(8px);
  border-bottom: none !important;
  box-shadow: 0 2px 14px rgba(74, 94, 84, 0.06);
}
.layout-main {
  background: #f5f8f5;
}
.page-title {
  color: #41504a;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.collapse-btn {
  color: #8fa39a !important;
  transition: color 0.2s ease;
}
.collapse-btn:hover {
  color: #68a691 !important;
}
/* 右上角用户信息：胶囊形柔和 hover */
.user-info {
  padding: 6px 14px;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}
.user-info:hover {
  background: #f0f6f2;
}
.user-info .username {
  color: #52796b;
}

/* ---------- 侧边菜单（覆盖组件内联变量） ---------- */
.el-menu {
  --el-menu-bg-color: transparent !important;
  --el-menu-text-color: #64756d !important;
  --el-menu-active-color: #4f8a76 !important;
  --el-menu-hover-bg-color: #eef5f1 !important;
  --el-menu-item-height: 52px;
  --el-menu-sub-item-height: 46px;
  border-right: none !important;
  padding: 8px 4px;
}
.el-menu .el-menu-item,
.el-menu .el-sub-menu__title {
  margin: 2px 10px;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.el-menu .el-menu-item:hover,
.el-menu .el-sub-menu__title:hover {
  background-color: #f0f6f2 !important;
  color: #4f8a76 !important;
}
.el-menu .el-menu-item.is-active {
  background: linear-gradient(90deg, #e3efe9 0%, #eef5f1 100%) !important;
  color: #3f7a66 !important;
  font-weight: 600;
  position: relative;
}
.el-menu .el-menu-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: #68a691;
}
/* 折叠状态下取消边距，避免错位 */
.el-menu--collapse .el-menu-item,
.el-menu--collapse .el-sub-menu__title {
  margin: 2px 6px;
}
/* 折叠时弹出的浮动子菜单保持白底（主菜单已设为透明） */
.el-menu--popup {
  background: #ffffff !important;
  border-radius: 12px;
}

/* ---------- 卡片 ---------- */
.el-card {
  border: 1px solid #e9efeb !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(74, 94, 84, 0.05) !important;
  transition: box-shadow 0.25s ease;
}
.el-card:hover {
  box-shadow: 0 6px 20px rgba(74, 94, 84, 0.09) !important;
}
.el-card__header {
  border-bottom: 1px solid #eef2ef !important;
  font-weight: 600;
  color: #37453e;
}

/* ---------- 按钮 ---------- */
.el-button {
  border-radius: 8px;
  transition: all 0.2s ease;
}
.el-button--primary {
  background: linear-gradient(135deg, #74b09a 0%, #5f9c85 100%);
  border: none;
  box-shadow: 0 3px 10px rgba(95, 156, 133, 0.28);
}
.el-button--primary:hover {
  background: linear-gradient(135deg, #7fb8a3 0%, #68a691 100%);
  box-shadow: 0 5px 14px rgba(95, 156, 133, 0.34);
  transform: translateY(-1px);
}
.el-button--primary:active {
  transform: translateY(0);
}
.el-button--default {
  border-color: #dde5e0;
  color: #55645d;
}
.el-button--default:hover {
  border-color: #aecdc2;
  color: #4f8a76;
  background: #f2f7f4;
}

/* ---------- 表格 ---------- */
.el-table {
  --el-table-header-bg-color: #f4f8f5;
  --el-table-header-text-color: #46564e;
  --el-table-row-hover-bg-color: #f3f8f5;
  --el-table-border-color: #edf1ee;
  border-radius: 12px;
}
.el-table th.el-table__cell {
  font-weight: 600;
}

/* ---------- 表单 / 输入框 ---------- */
.el-input__wrapper {
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px #dde5e0 inset !important;
  transition: box-shadow 0.2s ease;
}
.el-input__wrapper:hover {
  box-shadow: 0 0 0 1px #aecdc2 inset !important;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #68a691 inset !important;
}
.el-textarea__inner {
  border-radius: 8px !important;
}
.el-form-item__label {
  color: #55645d !important;
  font-weight: 500;
}

/* ---------- 弹窗 ---------- */
.el-dialog {
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(74, 94, 84, 0.14);
}
.el-dialog__title {
  font-weight: 600;
  color: #37453e;
}
.el-message-box {
  border-radius: 14px !important;
}

/* ---------- 分页 / 标签 / 其它小组件 ---------- */
.el-pagination {
  --el-pagination-hover-color: #4f8a76;
}
.el-pagination .el-pager li.is-active {
  border-radius: 8px;
}
.el-tag {
  border-radius: 6px;
  border: none;
}
.el-dropdown-menu {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(74, 94, 84, 0.10) !important;
}
.el-dropdown-menu__item:hover {
  background: #f0f6f2 !important;
  color: #4f8a76 !important;
}
.el-message {
  border-radius: 10px !important;
  box-shadow: 0 6px 20px rgba(74, 94, 84, 0.10);
}
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.7);
}

/* ---------- 滚动条（松弛感细节） ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #cfdad4;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #aecdc2;
}
::-webkit-scrollbar-track {
  background: transparent;
}