:root {
  --pea: #57A62B;
  --pea-dark: #3F8A1D;
  --el-color-primary: #57A62B;
  --el-color-primary-light-3: #8AC367;
  --el-color-primary-light-5: #ACC791;
  --el-color-primary-light-7: #CDE2BB;
  --el-color-primary-light-8: #DEEDD2;
  --el-color-primary-light-9: #EFF7E7;
  --el-color-primary-dark-2: #468522;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { height: 100%; width: 100%; }
body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #F0F4EC; }
[v-cloak] { display: none; }

/* ---------- 弹窗高度兜底（内容超高时弹窗内部滚动，避免底部溢出白块） ---------- */
.sched-dialog .el-dialog__body { max-height: calc(90vh - 120px); overflow-y: auto; }

/* ---------- 登录页 ---------- */
.login-wrap {
  height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2C4A1E 0%, #4A7A2C 55%, #7DB84E 100%);
}
.login-card {
  width: 400px; padding: 44px 40px 36px; border-radius: 18px; background: #fff;
  box-shadow: 0 24px 60px rgba(20, 50, 5, .35); text-align: center;
}
.login-logo { font-size: 56px; line-height: 1; }
.login-title { font-size: 22px; font-weight: 700; color: #2C4A1E; margin: 12px 0 4px; }
.login-sub { font-size: 13px; color: #9AA78E; margin-bottom: 28px; }
.login-btn { width: 100%; height: 44px; font-size: 15px; letter-spacing: 4px; border-radius: 10px; }
.login-tip { margin-top: 16px; font-size: 12px; color: #B4BEA9; }

/* ---------- 主布局 ---------- */
.layout { height: 100%; width: 100%; display: flex; }
.aside {
  width: 220px; flex-shrink: 0; background: linear-gradient(180deg, #24391A 0%, #1B2B13 100%);
  display: flex; flex-direction: column; color: #D8E6C8;
}
.main-container { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aside-logo {
  height: 84px; display: flex; align-items: center; gap: 10px; padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.aside-logo .logo-emoji { font-size: 34px; }
.aside-logo .logo-text { text-align: left; }
.aside-logo .logo-text b { display: block; font-size: 17px; color: #fff; letter-spacing: 1px; }
.aside-logo .logo-text span { font-size: 11px; color: #8FA876; }
.aside .el-menu {
  background: transparent; border-right: none; flex: 1; padding: 8px;
  overflow-y: auto;       /* 菜单全部展开时侧边栏内滚动 */
  min-height: 0;          /* flex 子项默认不可收缩，必须置 0 才能触发 overflow 滚动 */
  scrollbar-width: thin;  /* Firefox 细滚动条 */
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.aside .el-menu::-webkit-scrollbar { width: 5px; }
.aside .el-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.aside .el-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
.aside .el-menu::-webkit-scrollbar-track { background: transparent; }
.aside .el-menu-item {
  color: #C3D4AE; border-radius: 10px; height: 48px; margin-bottom: 4px;
}
.aside .el-menu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.aside .el-menu-item.is-active {
  background: linear-gradient(90deg, #57A62B, #6FBF44); color: #fff;
  box-shadow: 0 4px 14px rgba(87,166,43,.4);
}
.aside .el-menu-item .el-icon { margin-right: 8px; }

/* ---------- 二级菜单（分组） ---------- */
.aside .el-sub-menu { margin-bottom: 4px; }
.aside .el-sub-menu__title {
  color: #C3D4AE; border-radius: 10px; height: 48px;
  font-size: 15px;
}
.aside .el-sub-menu__title:hover { background: rgba(255,255,255,.08); color: #fff; }
.aside .el-sub-menu__title .el-icon { margin-right: 8px; color: #8FA876; }
.aside .el-sub-menu.is-opened > .el-sub-menu__title { color: #fff; }
.aside .el-sub-menu.is-opened > .el-sub-menu__title .el-icon { color: #fff; }
/* 子菜单容器：半透明底色与父级区分 */
.aside .el-sub-menu .el-menu { background: rgba(0,0,0,.18); border-radius: 10px; padding: 4px; }
.aside .el-sub-menu .el-menu .el-menu-item {
  height: 42px; font-size: 14px; padding-left: 44px !important;
  margin-bottom: 2px;
}
/* 子项激活态图标对齐 */
.aside .el-sub-menu .el-menu .el-menu-item .el-icon { margin-right: 8px; }

.header {
  height: 64px; background: #fff; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; box-shadow: 0 1px 8px rgba(40,70,20,.06); position: relative; z-index: 5;
}
.header-title { font-size: 17px; font-weight: 600; color: #2C3B22; display: flex; align-items: center; gap: 8px; }
.header-title .el-icon { color: var(--pea); }
.main { padding: 20px; overflow-y: auto; background: #F0F4EC; flex: 1; }

.panel { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(40,70,20,.05); overflow-x: auto; }
.panel .el-table { min-width: 1100px; table-layout: fixed; }
.panel .el-table th .cell { white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; }
.pager { display: flex; justify-content: flex-end; margin-top: 16px; }

/* 仪表盘 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-card {
  border-radius: 14px; padding: 18px; color: #fff; position: relative; overflow: hidden;
}
.stat-card .s-emoji { font-size: 40px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: .5; }
.stat-card .s-num { font-size: 30px; font-weight: 700; line-height: 1.2; }
.stat-card .s-label { font-size: 13px; opacity: .9; margin-top: 4px; }
.dash-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
@media (max-width: 1100px) { .dash-cols { grid-template-columns: 1fr; } }
.panel-title { font-size: 15px; font-weight: 600; color: #2C3B22; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.hot-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hot-item .h-emoji { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #EFF7E7; flex-shrink: 0; }
.hot-item .h-info { flex: 1; min-width: 0; }
.hot-item .h-name { font-size: 13px; color: #3A4530; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-item .h-bar { margin-top: 4px; }

/* 商品图占位 */
.p-img {
  width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 24px; background: #EFF7E7; overflow: hidden;
}
.p-img img { width: 100%; height: 100%; object-fit: cover; }

/* 费用汇总（订单明细弹窗） */
.fee-summary {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #EBEEF5;
}
.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: #606266;
}
.fee-row.discount span:last-child {
  color: #FF6B35;
  font-weight: 600;
}
.fee-row .free {
  color: #67C23A;
  font-weight: 600;
}
.fee-row.total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #EBEEF5;
  font-size: 15px;
  font-weight: 700;
  color: #303133;
}
.fee-row.total span:last-child {
  color: #F56C6C;
  font-size: 16px;
}

/* 预约详情弹窗 */
.booking-detail { padding: 0 4px; }
.detail-row {
  display: flex; padding: 10px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row span {
  width: 80px; flex-shrink: 0; color: #909399;
}
.detail-row em {
  flex: 1; color: #303133; font-style: normal; word-break: break-all;
}

/* 宠物健康档案抽屉 */
.archive { padding: 0 4px; }
.pet-summary {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px;
  background: #F7FAF4; border: 1px solid #E4EED8; border-radius: 12px;
}
.pet-summary .el-avatar { flex-shrink: 0; }
.ps-info { flex: 1; min-width: 0; }
.ps-name { font-size: 17px; font-weight: 700; color: #2C3B22; display: flex; align-items: center; gap: 8px; }
.ps-meta { font-size: 13px; color: #7A866C; margin-top: 4px; }
.ps-remark { color: #B08A4A; }