* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: #cfe9d3;
}

/* ============ 护眼主题：全局浅豆绿，长时间使用不易疲劳 ============ */
:root {
  --el-bg-color: #f0f7f1;
  --el-bg-color-overlay: #f4f9f5;
  --el-fill-color-blank: #f0f7f1;
  --el-fill-color-light: #e3f0e6;
  --el-fill-color-lighter: #e8f3ea;
  --el-fill-color-extra-light: #eef5f0;
  --el-fill-color-dark: #d7e7db;
  --el-fill-color-darker: #cdddd0;
  --el-border-color: #c6d9ca;
  --el-border-color-light: #d0e0d4;
  --el-border-color-lighter: #dbe8dd;
  --el-border-color-extra-light: #e3eee5;
  --el-table-bg-color: #f0f7f1;
  --el-table-tr-bg-color: #f0f7f1;
  --el-table-row-hover-bg-color: #e6f2e9;
  --el-table-stripe-bg-color: #e8f3ea;
  --el-table-header-bg-color: #00796b;
  --el-table-border-color: #d0e0d4;
}

/* ============ 侧边栏（深青色 / 墨绿蓝绿主题） ============ */
.sidebar {
  background: linear-gradient(180deg, #00796b 0%, #00695c 55%, #004d40 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 2px 0 8px rgba(0,77,64,.25);
}
.logo {
  display: flex; align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.06);
}
.logo-word { display: flex; flex-direction: column; justify-content: center; }
.logo-title-row { display: flex; align-items: center; gap: 6px; }
.logo-text {
  display: block;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 21px; font-weight: 700; letter-spacing: 2px; line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  white-space: nowrap;
}
.logo-icon { font-size: 19px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.logo-sub {
  margin-top: 3px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: 3.5px;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  white-space: nowrap;
}
.menu { flex: 1; padding: 12px 0; overflow-y: auto; }
.menu-item {
  padding: 14px 16px; cursor: pointer; color: rgba(255,255,255,.82);
  border-left: 3px solid transparent; font-size: 14px; transition: all .18s;
  display: flex; align-items: center; gap: 8px;
}
.menu-item .mi-icon { font-size: 17px; width: 20px; text-align: center; opacity: .9; display: inline-flex; align-items: center; justify-content: center; }
.menu-item .mi-icon svg { width: 18px; height: 18px; display: block; }
.menu-item:hover { color: #fff; background: rgba(255,255,255,.10); }
.menu-item.active {
  color: #fff; background: rgba(255,255,255,.18);
  border-left-color: #ffd54f; font-weight: bold;
}
.sidebar-footer {
  padding: 14px; text-align: center; color: rgba(255,255,255,.55); font-size: 12px;
  border-top: 1px solid rgba(255,255,255,.14);
}

/* ============ 顶栏 ============ */
.header {
  background: #f0f7f1; display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); z-index: 5;
}
.header-title { font-size: 17px; font-weight: bold; color: #00695c; }
.header-right { display: flex; align-items: center; gap: 6px; }
.user-name { color: #666; font-size: 14px; margin-right: 8px; }

.main { background: #cfe9d3; padding: 16px; overflow: hidden; display: flex; flex-direction: column; }

/* ============ 视口锁定布局：整页固定为可视区大小，只有表格数据区滚动 ============
   .page-fit   视图根节点：撑满主区域，自身不产生整页滚动
   .card-grow  主表格卡片：占据剩余高度，工具栏/分页固定，表格内部滚动 */
.page-fit { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* page-fit 内的普通子块（提示条、筛选卡、统计卡等）保持自然高度、不被压缩 */
.page-fit > * { flex-shrink: 0; }
/* 工作台（首页）：内容整体在固定视口内纵向滚动 */
.page-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.page-scroll::-webkit-scrollbar { width: 8px; }
.page-scroll::-webkit-scrollbar-track { background: transparent; }
.page-scroll::-webkit-scrollbar-thumb { background: rgba(0, 121, 107, .28); border-radius: 4px; }
.page-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0, 121, 107, .5); }
.card-grow { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.card-grow > .el-card__body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* 表格撑满剩余空间：表头锁定、表体内部滚动 —— 右侧滚动条只滚数据行，底部为横向滚动条 */
.card-grow > .el-card__body > .el-table { flex: 1 1 0; min-height: 0; }
/* 带标签页的页面（财务管理）：标签页也纳入自适应，内部表格同样锁定表头滚动 */
.card-grow > .el-card__body > .el-tabs { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.card-grow > .el-card__body > .el-tabs > .el-tabs__content { flex: 1 1 0; min-height: 0; overflow: hidden; }
.card-grow .el-tab-pane { height: 100%; display: flex; flex-direction: column; }
.card-grow .el-tab-pane > .el-table { flex: 1 1 0; min-height: 0; }

/* 内容区内侧滚动条（细条，悬停加深），顶栏与侧栏不随内容滚动 */
.main::-webkit-scrollbar, .menu::-webkit-scrollbar { width: 8px; }
.main::-webkit-scrollbar-track, .menu::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb, .menu::-webkit-scrollbar-thumb {
  background: rgba(0, 121, 107, .28); border-radius: 4px;
}
.main::-webkit-scrollbar-thumb:hover, .menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 121, 107, .5);
}

/* 工具栏 */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}

/* 文档管理：文件格式角标 */
.doc-ext {
  flex: none; display: inline-block; min-width: 40px; padding: 3px 6px; border-radius: 4px;
  color: #fff; font-size: 11px; font-weight: bold; text-align: center; letter-spacing: .5px;
}

/* 统计卡片 */
.stat-label { color: #909399; font-size: 13px; margin-bottom: 6px; }
.stat-value { font-size: 26px; font-weight: bold; color: #00695c; }
.stat-sub { color: #909399; font-size: 12px; margin-top: 6px; }

.el-card { border-radius: 6px; border: none; box-shadow: none; background: transparent; }
.el-card .el-card__body { padding: 8px 0; }
.el-button--primary {
  --el-button-bg-color: #00796b;
  --el-button-border-color: #00796b;
  --el-button-hover-bg-color: #00897b;
  --el-button-hover-border-color: #00897b;
  --el-button-active-bg-color: #00695c;
  --el-button-active-border-color: #00695c;
}
.el-button--success {
  --el-button-bg-color: #00897b;
  --el-button-border-color: #00897b;
}
.el-tag.success { background-color: #e0f2f1; color: #00796b; border-color: #b2dfdb; }

/* ============ 首页 / 工作台：模块卡片导航 ============ */
.home-banner {
  background: linear-gradient(90deg, #00695c, #00897b);
  color: #fff;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 2px 10px rgba(0,105,92,.2);
}
.home-banner .hb-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.home-banner .hb-icon svg { width: 32px; height: 32px; display: block; }
.home-banner .hb-title { font-size: 20px; font-weight: bold; }
.home-banner .hb-sub { font-size: 13px; opacity: .9; margin-top: 4px; }

.home-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: bold; color: #303133;
  margin: 6px 0 14px;
}
.home-label .hl-bar { width: 4px; height: 18px; background: #00796b; border-radius: 2px; }

/* 每个模块一行卡片：图标 + 标题/描述 + 快捷入口 */
.module-group {
  display: flex; align-items: center;
  background: #f0f7f1; border-bottom: 1px solid #dbe8dd; border-radius: 0;
  padding: 16px 8px; margin-bottom: 0; cursor: pointer;
  transition: all .18s;
}
.module-group:first-of-type { border-top: 1px solid #dbe8dd; }
.module-group:hover {
  background: #e6f2e9;
}
.module-icon {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: #00796b; margin-right: 14px;
}
.module-icon svg { width: 24px; height: 24px; display: block; stroke-width: 1.8; color: #00796b; }
.module-info { flex: 1; min-width: 0; }
.module-title { font-size: 16px; font-weight: bold; color: #303133; }
.module-desc { font-size: 12px; color: #909399; margin-top: 5px; }
.module-links { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 460px; }
.module-link {
  color: #00796b; font-size: 13px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid #e0f2f1; background: #f4fbfa; white-space: nowrap;
}
.module-link:hover { background: #e0f2f1; border-color: #b2dfdb; }

/* 小型统计卡（首页顶部） */
.mini-stat {
  text-align: center; padding: 6px 4px;
}
.mini-stat .ms-value { font-size: 24px; font-weight: bold; color: #00695c; }
.mini-stat .ms-label { font-size: 12px; color: #909399; margin-top: 6px; }

/* ============ 表格表头：与侧边栏深青色一致 ============ */
/* 覆盖所有 el-table 表头首行（th），统一为深青色 #00796b 白字 */
.el-table th.el-table__cell {
  background: #00796b !important;
  color: #ffffff !important;
  font-weight: 600;
  border-bottom-color: #00695c !important;
}
.el-table th.el-table__cell > .cell {
  color: #ffffff !important;
}
/* 表头 hover / 排序箭头颜色同步 */
.el-table th.el-table__cell .cell:hover { color: #ffffff; }
.el-table th.el-table__cell .sort-caret.ascending,
.el-table th.el-table__cell .sort-caret.descending { border-bottom-color: #ffffff; border-top-color: #ffffff; }
.el-table__header th.el-table__cell { background: #00796b !important; }
/* 表头筛选下拉图标 */
.el-table th.el-table__cell .el-table__column-filter-trigger { color: rgba(255,255,255,.85) !important; }

/* 固定列（fixed）表头也要随主题色，保持视觉连续 */
.el-table .el-table__fixed-header-wrapper th.el-table__cell,
.el-table .el-table__fixed-right-header th.el-table__cell {
  background: #00796b !important;
}
/* 表格主体：护眼浅绿底，兜底清除纯白 */
.el-table { --el-table-bg-color: #f0f7f1; }
.el-table__body { background: #f0f7f1; }
.el-table__body tr.el-table__row > td.el-table__cell { background: #f0f7f1; }
.el-table__body tr.el-table__row:hover > td.el-table__cell { background: #e6f2e9; }
.el-table__body tr.el-table__row--striped > td.el-table__cell { background: #e8f3ea; }

/* ============ 生产工单弹窗：加工工序 整齐左对齐 ============ */
/* ①② 各占一行，勾选框固定左上，文字右缩进，换行不顶格 */
.proc-radio,
.proc-check {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}
.proc-radio .el-radio,
.proc-check .el-checkbox {
  display: flex !important;
  align-items: flex-start;
  height: auto;
  margin-right: 0;
  margin-bottom: 4px;
}
.proc-radio .el-radio__input,
.proc-check .el-checkbox__input {
  margin-top: 2px;
  flex-shrink: 0;
}
.proc-radio .el-radio__label,
.proc-check .el-checkbox__label {
  white-space: normal;
  text-align: left;
  flex: 1;
  line-height: 22px;
  padding-left: 2px;
  color: #303133;
}
/* 弹窗内下拉选项面板跟随输入框，不漂移 */
.el-dialog .el-select__popper {
  position: absolute !important;
}

/* ============ 生产管理：工序彩色标签 ============ */
.proc-tag {
  margin: 2px 3px;
  white-space: normal;
  line-height: 18px;
  border-radius: 3px;
}
.proc-tag-purple {
  background-color: #f3e8ff;
  color: #6a1b9a;
  border-color: #d8b4fe;
}
.proc-tag-yellow {
  background-color: #fff8e1;
  color: #b7791f;
  border-color: #ffe08a;
}
.proc-tag-plain {
  background-color: #f0f2f5;
  color: #606266;
  border-color: #dcdfe6;
}
.proc-tag-blue {
  background-color: #1976d2 !important;
  color: #fff !important;
  border-color: #1565c0 !important;
}
.proc-tag-pink {
  background-color: #e91e63 !important;
  color: #fff !important;
  border-color: #c2185b !important;
}

/* ===== 去掉浏览器自动填充带来的淡蓝/淡黄底色 =====
   浏览器自动填充用 !important 强写 background，普通 background 盖不住，
   必须用超大内阴影遮掉底色，并强制文字深色 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.el-input__inner:-webkit-autofill,
.el-input__inner:-webkit-autofill:hover,
.el-input__inner:-webkit-autofill:focus,
.el-input__inner:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #333 !important;
  background-color: #ffffff !important;
  caret-color: #333;
  transition: background-color 5000s ease-in-out 0s;
}

/* ============ 页面顶部提示条（生产 / 销售 / 财务） ============
   浅蓝配色：浅蓝渐变底 + 左侧亮蓝 4px 竖条 + 深蓝加粗文字，
   与整体护眼豆绿形成适度对比，醒目且不刺眼 */
.el-alert.hint-alert {
  --el-alert-padding: 9px 14px;
  background: linear-gradient(90deg, #d6e9fb 0%, #e8f3fd 62%, #f3f9fe 100%) !important;
  border: 1px solid #9ec9f0 !important;
  border-left: 4px solid #1e88e5 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(21, 101, 192, .10);
}
.el-alert.hint-alert .el-alert__title {
  color: #0d47a1 !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.66;
  letter-spacing: .2px;
}
.el-alert.hint-alert .el-alert__icon {
  color: #1e88e5 !important;
  font-size: 15px;
  width: 15px;
  margin-right: 8px;
  align-self: center;
}
/* 多行说明型提示条（文档管理等）：正文与标题同色同字重，避免落回 EP 默认灰字 */
.el-alert.hint-alert .el-alert__description {
  color: #0d47a1 !important;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .2px;
  margin: 6px 0 0;
}
/* 应收账款明细：退货冲减行整行浅橙底，与销售行一眼区分（金额为负 = 冲减应收） */
.el-table .receivable-return-row > td.el-table__cell {
  background: #fffaf3 !important;
}
.el-table .receivable-return-row:hover > td.el-table__cell {
  background: #fff4e6 !important;
}
/* 库存构成公式核对（按品种）：表头改用蓝色渐变（用户指定：干净醒目）
   文字白色加粗 + 轻微投影保证在渐变上的可读性，底边深蓝描边 + 表头投影加重分隔。 */
.recon-table th.el-table__cell,
.recon-table .el-table__header th.el-table__cell {
  background: #1565c0 !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #0d47a1 !important;
  border-right-color: rgba(255,255,255,.35) !important;
  letter-spacing: .3px;
}
.recon-table th.el-table__cell > .cell {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.recon-table th.el-table__cell .cell:hover,
.recon-table th.el-table__cell .el-table__column-filter-trigger {
  color: #ffffff !important;
}
.recon-table th.el-table__cell .sort-caret.ascending,
.recon-table th.el-table__cell .sort-caret.descending {
  border-bottom-color: #ffffff;
  border-top-color: #ffffff;
}

/* 行次拖动排序：按住行左键可上下拖动 */
.el-table__body tbody tr[draggable="true"] { cursor: move; }
.el-table__body tbody tr[draggable="true"] td { user-select: none; }

/* 列表底部「本页合计」汇总行：浅蓝色底纹（采购/生产/销售/退货/费用管理通用） */
.el-table__footer-wrapper tr td,
.el-table__footer-wrapper tfoot td,
.el-table__body-wrapper tfoot tr td {
  background-color: #c6e2ff !important;
}
.el-table__footer-wrapper tr td .cell {
  font-weight: 700;
}

/* 行次列（ID）：默认不可选，保证上下拖动能触发拖行；
   判定为横向拖动选字时由 JS 加 .dnd-selectable 临时放开选中 */
.el-table__body tbody td.seq-col { user-select: none; -webkit-user-select: none; cursor: move; }
.el-table__body tbody td.seq-col.dnd-selectable,
.el-table__body tbody td.seq-col.dnd-selectable * {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

/* 行次拖动排序提示：大字号蓝色醒目样式 */
.el-message.dnd-toast {
  background: linear-gradient(135deg, #42a5f5, #1565c0) !important;
  border: 2px solid #0d47a1 !important;
  box-shadow: 0 8px 28px rgba(13, 71, 161, 0.45) !important;
  padding: 15px 36px !important;
  border-radius: 10px !important;
}
.el-message.dnd-toast .el-message__content {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 3px;
}

/* 库存构成公式核对：按品类行底色带区分（与品类名主色同色系） */
.recon-table .recon-cat-raw > td.el-table__cell { background: #e8f5e9 !important; }
.recon-table .recon-cat-semi > td.el-table__cell { background: #e0f2f1 !important; }
.recon-table .recon-cat-roasted > td.el-table__cell { background: #e8f5e9 !important; }
.recon-table .recon-cat-pine > td.el-table__cell { background: #e3f2fd !important; }
.recon-table .recon-cat-hongmo > td.el-table__cell { background: #ffebee !important; }
.recon-table .recon-cat-zhenmo > td.el-table__cell { background: #efebe9 !important; }
.recon-table .recon-cat-muer > td.el-table__cell { background: #f3e5f5 !important; }
.recon-table .recon-cat-giftbox > td.el-table__cell { background: #fffde7 !important; }
.recon-table .recon-cat-other > td.el-table__cell { background: #eceff1 !important; }

/* 核对工序下拉框状态色（已完结=深绿底白字，未完结=红底白字，特殊=橘底白字） */
.check-status-select.check-status-completed .el-input__wrapper,
.check-status-option-completed,
.el-select-dropdown__item.check-status-option-completed {
  background-color: #1b5e20 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.check-status-select.check-status-pending .el-input__wrapper,
.check-status-option-pending,
.el-select-dropdown__item.check-status-option-pending {
  background-color: #c62828 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.check-status-select.check-status-special .el-input__wrapper,
.check-status-option-special,
.el-select-dropdown__item.check-status-option-special {
  background-color: #ef6c00 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.check-status-select.check-status-completed .el-input__inner,
.check-status-select.check-status-pending .el-input__inner,
.check-status-select.check-status-special .el-input__inner,
.check-status-select.check-status-completed .el-select__caret,
.check-status-select.check-status-pending .el-select__caret,
.check-status-select.check-status-special .el-select__caret {
  color: #fff !important;
}
.check-status-select.check-status-completed .el-input__inner::placeholder,
.check-status-select.check-status-pending .el-input__inner::placeholder,
.check-status-select.check-status-special .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* 下拉选项 hover / 选中态 */
.el-select-dropdown__item.check-status-option-completed:hover,
.el-select-dropdown__item.check-status-option-completed.selected {
  background-color: #143d14 !important;
  color: #fff !important;
}
.el-select-dropdown__item.check-status-option-pending:hover,
.el-select-dropdown__item.check-status-option-pending.selected {
  background-color: #9e1b1b !important;
  color: #fff !important;
}
.el-select-dropdown__item.check-status-option-special:hover,
.el-select-dropdown__item.check-status-option-special.selected {
  background-color: #c05500 !important;
  color: #fff !important;
}

/* 客户级别标签：大客户=白字红底，中等客户=白字绿底，小客户=白字蓝底，小客户微信扫码=白字粉底 */
.cust-level-tag-big {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: #c62828 !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
}
.cust-level-tag-medium {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: #2e7d32 !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
}
.cust-level-tag-small {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: #1976d2 !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
}
.cust-level-tag-wxscan {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background-color: #e91e63 !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
}

/* 销售管理：渠道类型标签字体加大（线上=绿，线下=蓝，沿用 Element Plus info/success 风格） */
.channel-type-tag {
  font-size: 14px !important;
  padding: 3px 10px !important;
  height: auto !important;
  line-height: 1.5 !important;
  border-radius: 4px !important;
}
.channel-online {
  background-color: #e8f5e9 !important;
  border-color: #a5d6a7 !important;
  color: #2e7d32 !important;
}
.channel-offline {
  background-color: #e6f1fb !important;
  border-color: #b5d4f4 !important;
  color: #185fa5 !important;
}

/* 费用管理/采购管理：标记列加大白字，背景色由 JS 按内容动态分配 */
.mark-tag,
.expense-mark-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}