/* ============================================
   【UI美化 - 草木深绿主题】页面样式
   主题色：草木深绿 #117C0D | 雅典绿 #1E3B1A
   修改内容：容器卡片、表格工具栏、分页、表单、上传组件等
   ============================================ */

/* --- 仪表盘容器 --- */
.dashboard-container {
  padding: 24px; /* 微调内边距，原 20px */
  min-width: 0;
}
.dashboard-container .container {
  background: #fff;
  position: relative;
  z-index: 1;
  padding: 28px 24px; /* 优化内边距，原 30px 28px */
  border-radius: 10px; /* 增大圆角，原 4px */
  box-shadow: 0 2px 12px rgba(30, 59, 26, 0.04); /* 新增柔和阴影 */
  border: 1px solid #EADFCB; /* 新增田园绿调边框 */
}

/* --- 表格工具栏 --- */
.dashboard-container .container .tableBar {
  display: flex;
  margin-bottom: 20px;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px; /* 微调间距，原 10px */
  align-items: center;
}

/* --- 表格容器 --- */
.dashboard-container .container .tableBox {
  width: 100%;
  border: solid 1px #E2D8C4; /* 灰绿边框，原 2px #f3f4f7 */
  border-radius: 8px; /* 增大圆角，原 2px */
  overflow-x: auto;
  overflow: hidden; /* 确保圆角生效 */
  box-shadow: 0 1px 4px rgba(30, 59, 26, 0.03); /* 新增轻微阴影 */
}

.dashboard-container .container .tableBox .el-image img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px; /* 微调圆角，原 5px */
}

/* --- 分页区域 --- */
.dashboard-container .container .pageList {
  text-align: center;
  margin-top: 24px; /* 微调间距，原 30px */
  padding-top: 16px;
  border-top: 1px solid #EADFCB; /* 新增顶部分隔线 */
}

/* --- 表格操作按钮 --- */
.dashboard-container .container .tableLab .span-btn {
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  padding: 0 16px; /* 微调内边距，原 20px */
  color: #6F7A6B; /* 灰绿文字，原 #818693 */
  border-right: solid 1px #E2D8C4; /* 灰绿边框，原 #d8dde3 */
  transition: color 0.25s;
}
.dashboard-container .container .tableLab .span-btn:hover {
  color: #117C0D; /* 新增草木深绿悬停色 */
}

.dashboard-container .container .tableLab .el-button {
  margin-left: 10px;
}

.el-table-column--selection .cell {
  padding-left: 10px;
}

/* --- 添加/编辑表单容器 --- */
.addBrand-container .avatar-uploader .el-upload {
  border: 1px dashed #D8CDB8; /* 灰绿虚线，原 #d9d9d9 */
  border-radius: 8px; /* 增大圆角，原 6px */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.addBrand-container .avatar-uploader .el-upload:hover {
  border-color: #117C0D; /* 草木深绿，原 #409eff */
  background: #EAF2E6; /* 新增悬停背景 */
}
.addBrand-container .avatar-uploader-icon {
  font-size: 28px;
  color: #9AA58F; /* 灰绿，原 #9AA58F */
  width: 200px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
.addBrand-container .avatar {
  width: 160px;
  height: 160px;
  display: block;
  object-fit: cover;
  border-radius: 8px; /* 新增圆角 */
}
.addBrand-container .el-form--inline .el-form-item__content {
  width: 293px;
}
.addBrand-container .el-input {
  width: 293px;
}

.addBrand-container {
  margin: 24px; /* 微调外边距，原 30px */
}
.addBrand-container .container {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 28px; /* 微调内边距，原 30px */
  border-radius: 10px; /* 增大圆角，原 4px */
  min-height: 500px;
  box-shadow: 0 2px 12px rgba(30, 59, 26, 0.04); /* 新增阴影 */
  border: 1px solid #EADFCB; /* 新增边框 */
}
.addBrand-container .container .subBox {
  padding-top: 24px; /* 微调间距，原 30px */
  text-align: center;
  border-top: solid 1px #EADFCB; /* 灰绿边框，原 #f3f4f7 */
}

/* --- 规格/属性盒子 --- */
.flavorBox {
  width: 777px;
}
.flavorBox .addBut {
  background: #117C0D; /* 草木深绿，原 #00FA9A */
  display: inline-block;
  padding: 0px 20px;
  border-radius: 6px; /* 统一圆角，原 3px/4px */
  line-height: 38px; /* 微调高度，原 40px */
  cursor: pointer;
  color: #ffffff; /* 白色文字，原 #333333 */
  font-weight: 500;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(17, 124, 13, 0.25); /* 新增阴影 */
}
.flavorBox .addBut:hover {
  background: #3E9A38; /* 新增悬停色 */
  box-shadow: 0 4px 10px rgba(17, 124, 13, 0.35); /* 新增悬停阴影 */
  transform: translateY(-1px); /* 新增上浮效果 */
}
.flavorBox .flavor {
  border: solid 1px #E2D8C4; /* 灰绿边框，原 #dfe2e8 */
  border-radius: 8px; /* 增大圆角，原 3px */
  padding: 18px; /* 微调内边距，原 15px */
  background: #F1ECE0; /* 麻纸米白背景，原 #fafafb */
}
.flavorBox .flavor .title {
  color: #2E3B2B; /* 深绿文字，原 #606168 */
  font-weight: 600; /* 新增字重 */
  margin-bottom: 12px; /* 新增下边距 */
}
.flavorBox .flavor .cont .items {
  display: flex;
  margin: 12px 0; /* 微调间距，原 10px */
}
.flavorBox .flavor .cont .items .itTit {
  width: 150px;
  margin-right: 15px;
}
.flavorBox .flavor .cont .items .itTit input {
  width: 100%;
  line-height: 38px;
  border-radius: 6px; /* 增大圆角，原 3px */
  padding: 0 12px;
  border: 1px solid #E2D8C4; /* 新增边框样式 */
  transition: border-color 0.25s;
}
.flavorBox .flavor .cont .items .itTit input:focus {
  border-color: #117C0D; /* 新增聚焦色 */
  outline: none;
}
.flavorBox .flavor .cont .items .labItems {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  border-radius: 6px; /* 增大圆角，原 3px */
  min-height: 38px; /* 微调高度，原 39px */
  border: solid 1px #E2D8C4; /* 灰绿边框，原 #d8dde3 */
  background: #fff;
  padding: 4px 6px; /* 微调内边距，原 0 5px */
  gap: 6px; /* 新增间距 */
}
.flavorBox .flavor .cont .items .labItems span {
  display: inline-block;
  color: #117C0D; /* 草木深绿文字，原 #00FA9A */
  margin: 4px 0; /* 微调间距 */
  line-height: 26px;
  height: 26px;
  padding: 0 12px; /* 微调内边距，原 10px */
  background: #EAF2E6; /* 麻纸米白背景，原 #fdf4eb */
  border-radius: 4px; /* 增大圆角，原 3px */
  border: solid 1px #E6DCC8; /* 暖黄边框，原 #fae2cd */
  font-size: 13px; /* 新增字号 */
  font-weight: 500; /* 新增字重 */
}
.flavorBox .flavor .cont .items .labItems span i {
  cursor: pointer;
  font-style: normal;
  margin-left: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.flavorBox .flavor .cont .items .labItems span i:hover {
  opacity: 1; /* 新增悬停效果 */
}
.flavorBox .flavor .cont .items .labItems .inputBox {
  display: inline-block;
  width: 100%;
  height: 34px; /* 微调高度，原 36px */
  line-height: 34px;
  overflow: hidden;
}
.flavorBox .flavor .cont .items .delFlavor {
  display: inline-block;
  padding: 0 12px; /* 微调内边距，原 10px */
  color: #117C0D; /* 草木深绿，原 #00FA9A */
  cursor: pointer;
  transition: color 0.25s;
}
.flavorBox .flavor .cont .items .delFlavor:hover {
  color: #C45A4A; /* 新增悬停色 */
}

.addBrand-container .address .el-form-item__content {
  width: 777px !important;
}

/* --- 文字按钮 --- */
.el-button--text {
  font-weight: 400 !important;
  font-size: 13px !important;
}

/* --- 表格单元格字号 --- */
.el-table td {
  font-size: 13px !important;
}

.el-table .cell,
.el-table th div,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
  padding-left: 14px; /* 微调内边距，原 12px */
}

.dashboard-container img,
.addBrand-container img {
  max-width: 100%;
}

.dashboard-container .el-table,
.dashboard-container .el-table__body-wrapper,
.dashboard-container .el-table__header-wrapper {
  max-width: 100%;
}

.dashboard-container .el-input,
.dashboard-container .el-select,
.dashboard-container .el-date-editor {
  max-width: 100%;
}

/* --- 响应式：900px 以下 --- */
@media (max-width: 900px) {
  .dashboard-container {
    padding: 14px;
  }

  .dashboard-container .container,
  .addBrand-container .container {
    padding: 18px;
  }

  .dashboard-container .container .tableBar > * {
    flex: 1 1 180px;
    margin-right: 0 !important;
  }

  .dashboard-container .container .tableBar .el-button {
    flex: 0 0 auto;
  }

  .dashboard-container .container .pageList {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .addBrand-container {
    margin: 14px;
  }

  .flavorBox,
  .addBrand-container .address .el-form-item__content {
    width: 100% !important;
  }

  .flavorBox .flavor .cont .items {
    flex-wrap: wrap;
    gap: 10px;
  }

  .flavorBox .flavor .cont .items .itTit {
    width: 100%;
    margin-right: 0;
  }
}

/* --- 响应式：640px 以下 --- */
@media (max-width: 640px) {
  .dashboard-container {
    padding: 10px;
  }

  .dashboard-container .container,
  .addBrand-container .container {
    padding: 14px;
  }

  .dashboard-container .container .tableBar {
    display: block;
  }

  .dashboard-container .container .tableBar > * {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  .el-dialog {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }

  .el-dialog__body {
    padding: 24px 18px 16px;
  }

  .addBrand-container .el-form--inline .el-form-item__content,
  .addBrand-container .el-input {
    width: 100%;
  }
}

/* Shared page tokens, kept here because every Vue page loads this stylesheet. */
.module-page,
.audit-page {
  background: #F1ECE0 !important;
  color: #2E3B2B !important;
}

.module-page .page-head h1,
.audit-page .page-head h1 {
  color: #1E3B1A !important;
}

.module-page .page-head p,
.audit-page .page-head p,
.metric-card span {
  color: #6F7A6B !important;
}

.module-page .panel,
.module-page .metric-card,
.audit-page .panel {
  background: #FAF6EF !important;
  border-color: #E2D8C4 !important;
  box-shadow: 0 3px 12px rgba(74, 86, 58, .07) !important;
}

.module-page .toolbar .el-button--primary,
.audit-page .toolbar .el-button--primary,
.audit-page .page-head .el-button--primary {
  background: #117C0D !important;
  border-color: #117C0D !important;
}

.module-page .toolbar .el-button--primary:hover,
.audit-page .toolbar .el-button--primary:hover,
.audit-page .page-head .el-button--primary:hover {
  background: #3E9A38 !important;
  border-color: #3E9A38 !important;
}

.module-page .el-input__inner,
.module-page .el-textarea__inner,
.module-page .el-select .el-input__inner,
.audit-page .el-input__inner,
.audit-page .el-textarea__inner,
.audit-page .el-select .el-input__inner {
  border-color: #E2D8C4;
  background: #FAF6EF;
}

.module-page .el-table,
.audit-page .el-table {
  color: #3A4A36;
}

.module-page .el-table th,
.audit-page .el-table th {
  background: #FAF6EF !important;
  color: #6F7A6B !important;
}

.module-page .el-table tr,
.audit-page .el-table tr {
  background: #FAF6EF;
}

.module-page .el-table--striped .el-table__body tr.el-table__row--striped td,
.audit-page .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #F4EEE4;
}

.module-page .el-button--text,
.audit-page .el-button--text,
.module-page .image-link,
.audit-page .image-link {
  color: #117C0D !important;
}

.module-page .metric-card strong {
  color: #1E3B1A !important;
}

.module-page .metric-card i {
  color: #117C0D !important;
}

.module-page .bar-item span {
  background: #117C0D !important;
}

.module-page .el-pagination button,
.module-page .el-pagination .el-pager li,
.audit-page .el-pagination button,
.audit-page .el-pagination .el-pager li {
  color: #6F7A6B;
}

.module-page .el-pagination .el-pager li.active,
.audit-page .el-pagination .el-pager li.active {
  color: #117C0D;
}