/* SKU智能ERP v8.24.0
   性能架构、筛选分组、数量趋势与维护中心视觉增强
   仅覆盖展示层，不修改业务数据。 */

:root{
  --v824-blue:#2f65d8;
  --v824-blue-soft:#eef4ff;
  --v824-teal:#0d8b83;
  --v824-teal-soft:#eaf8f6;
  --v824-text:#1b2b43;
  --v824-muted:#66778d;
  --v824-line:#dce5ef;
  --v824-panel:#ffffff;
  --v824-canvas:#f4f7fb;
  --v824-shadow:0 12px 32px rgba(24,49,83,.08);
}

/* 总控筛选重新分区 */
.control-filter-panel{
  display:grid;
  grid-template-columns:minmax(320px,.88fr) minmax(520px,1.55fr);
  gap:12px;
  margin:12px 0 8px;
}
.control-filter-group,
.control-filter-advanced{
  min-width:0;
  border:1px solid var(--v824-line);
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#f9fbfe);
  box-shadow:0 5px 18px rgba(35,64,99,.05);
}
.control-filter-group{padding:13px}
.control-filter-primary{border-top:3px solid var(--v824-blue)}
.control-filter-group:nth-of-type(2){border-top:3px solid var(--v824-teal)}
.control-filter-group-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.control-filter-group-head b{font-size:14px;color:var(--v824-text)}
.control-filter-group-head span{font-size:11px;color:var(--v824-muted)}
.control-filter-grid,
.control-filter-advanced-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:9px;
  align-items:end;
}
.control-filter-primary .control-filter-grid{grid-template-columns:minmax(150px,.55fr) minmax(240px,1.45fr)}
.control-filter-panel label{
  display:grid;
  gap:5px;
  min-width:0;
  color:var(--v824-muted);
  font-size:11px;
  font-weight:650;
}
.control-filter-panel label.grow{min-width:0}
.control-filter-panel input,
.control-filter-panel select{
  width:100%;
  min-height:38px;
  border:1px solid #ccd8e6;
  border-radius:9px;
  background:#fff;
  color:var(--v824-text);
}
.control-filter-panel input:focus,
.control-filter-panel select:focus{
  border-color:#82a6eb;
  outline:3px solid rgba(47,101,216,.12);
}
.control-filter-panel .check{
  display:flex;
  align-items:center;
  flex-direction:row;
  gap:8px;
  min-height:38px;
  padding:8px 10px!important;
}
.control-filter-panel .check input{width:auto;min-height:0}
.control-filter-advanced{
  grid-column:1/-1;
  overflow:hidden;
}
.control-filter-advanced>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(90deg,#f4f8ff,#f1faf8);
}
.control-filter-advanced>summary::-webkit-details-marker{display:none}
.control-filter-advanced>summary>span:first-child{display:grid;gap:2px}
.control-filter-advanced>summary b{font-size:13px;color:var(--v824-text)}
.control-filter-advanced>summary small{font-size:10px;color:var(--v824-muted)}
.control-filter-summary-action{font-size:10px;color:#476a9f}
.control-filter-advanced-grid{padding:12px 14px 14px;grid-template-columns:repeat(4,minmax(145px,1fr))}
.control-action-bar{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--v824-line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 16px rgba(35,64,99,.04);
}
.control-action-primary,
.control-action-secondary{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.control-action-bar button{min-height:36px}
.control-active-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  min-height:28px;
  margin:4px 0 7px;
}
.control-active-filters:empty{display:none}
.control-active-filters span{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:3px 9px;
  border:1px solid #d7e3f2;
  border-radius:999px;
  background:#f4f8ff;
  color:#3e5f89;
  font-size:10px;
  font-weight:650;
}
.control-period-row{
  align-items:flex-start;
  padding:9px 11px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fafcff;
}
.control-period{line-height:1.65!important}

/* 总控读取状态 */
.control-is-loading .control-display-wrap{opacity:.76}
.control-loading-state,
.control-error-state,
.control-empty-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:110px;
  padding:18px;
  color:var(--v824-muted);
}
.control-error-state,
.control-empty-state{flex-direction:column;text-align:center}
.control-error-state b{color:#8b4b08}
.control-empty-state b{color:var(--v824-text)}
.control-loading-spinner{
  width:20px;height:20px;border:3px solid #dce7f6;border-top-color:var(--v824-blue);
  border-radius:50%;animation:v824-spin .75s linear infinite;
}
@keyframes v824-spin{to{transform:rotate(360deg)}}

/* 周期销量与周期收货数量趋势 */
.quantity-trend-head{
  background:linear-gradient(180deg,#edf7f6,#e8f2f7)!important;
  color:#24536d!important;
}
.quantity-trend-cell{
  padding:2px 4px!important;
  text-align:center!important;
}
.quantity-trend-cell-inner{
  display:grid;
  grid-template-columns:minmax(48px,1fr) auto;
  grid-template-rows:23px 16px;
  align-items:center;
  gap:0 6px;
  min-height:47px;
  padding:3px 4px;
  border-radius:8px;
}
.quantity-trend-cell:hover .quantity-trend-cell-inner{background:#f0f7fb}
.quantity-trend-mini-chart{grid-row:1/3;display:block;min-width:48px;height:27px}
.quantity-trend-cell b{
  font-size:12px;
  line-height:1;
  text-align:right;
  color:#274b69;
  font-variant-numeric:tabular-nums;
}
.quantity-trend-cell small{
  overflow:hidden;
  font-size:9px;
  color:#728197;
  text-align:right;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.quantity-trend-spark{display:block;width:100%;height:27px;overflow:visible}
.quantity-trend-line{
  fill:none;
  stroke:var(--v824-teal);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.quantity-trend-grid{
  fill:none;
  stroke:#dfe8ef;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.quantity-trend-spark circle{fill:#fff;stroke:var(--v824-teal);stroke-width:1.3;vector-effect:non-scaling-stroke}
.quantity-trend-empty{font-size:9px;color:#9aa6b5}
.quantity-trend-cell.sales-hot .quantity-trend-cell-inner{box-shadow:inset 3px 0 0 #4fae9d}
.quantity-trend-cell.price-only{font-variant-numeric:tabular-nums}
.quantity-trend-cell.price-only strong{font-size:14px;color:#2d4c67}

/* KPI改善 */
.control-kpis{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.control-kpis .kpi{
  border:1px solid #dde6f0;
  border-radius:12px;
  background:linear-gradient(180deg,#fff,#f8fbfe);
  box-shadow:0 5px 14px rgba(32,59,91,.05);
}
.control-kpis .kpi:nth-child(2),
.control-kpis .kpi:nth-child(3){border-top:3px solid var(--v824-teal)}

/* 维护中心 */
#maintenanceModal .maintenance-v824{
  width:min(1600px,98vw);
  max-width:min(1600px,98vw);
  max-height:96vh;
  border-radius:18px;
  background:#f4f7fb;
}
#maintenanceModal .maintenance-v824>.modal-head{
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid #dbe4ee;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
}
.maintenance-hero-strip{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:13px 0 10px;
  padding:15px 17px;
  border:1px solid #d9e4f2;
  border-radius:15px;
  background:linear-gradient(115deg,#f2f7ff 0%,#ffffff 48%,#eefaf7 100%);
  box-shadow:var(--v824-shadow);
}
.maintenance-hero-icon{
  display:grid;place-items:center;width:46px;height:46px;
  border-radius:13px;background:linear-gradient(135deg,var(--v824-blue),#5988e9);
  color:#fff;font-size:17px;font-weight:900;box-shadow:0 8px 20px rgba(47,101,216,.22)
}
.maintenance-hero-strip small{font-size:9px;letter-spacing:.14em;color:#6380a8;font-weight:800}
.maintenance-hero-strip h3{margin:3px 0 3px;color:var(--v824-text);font-size:18px}
.maintenance-hero-strip p{margin:0;color:var(--v824-muted);font-size:11px}
.maintenance-hero-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.maintenance-hero-badges span{
  padding:5px 8px;border:1px solid #cfdeef;border-radius:999px;background:#fff;
  color:#456686;font-size:9px;font-weight:750
}
.maintenance-overview-grid{gap:9px!important}
.maintenance-overview-card{
  appearance:none;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.maintenance-overview-card:hover{
  transform:translateY(-2px);
  border-color:#a9c2e3;
  box-shadow:0 10px 24px rgba(31,65,104,.11);
}
.maintenance-overview-card i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--v824-blue-soft);color:#3767b7;font-style:normal;font-weight:900
}
.maintenance-overview-card span{display:grid!important;gap:2px}
.maintenance-overview-card span b{margin:0!important}
.maintenance-overview-card span small{font-size:10px;color:#728196;line-height:1.45}
.maintenance-overview-card em{font-size:10px;color:#5e7da7;font-style:normal}
.maintenance-workspace{
  grid-template-columns:270px minmax(0,1fr)!important;
  gap:12px!important;
}
.maintenance-content{min-width:0}
.maintenance-workspace .maintenance-tabs-grouped{
  top:84px!important;
  max-height:calc(96vh - 118px)!important;
  padding:9px!important;
  border:1px solid #d9e4ee;
  background:linear-gradient(180deg,#f8fafc,#eef3f8)!important;
  box-shadow:0 8px 22px rgba(27,54,86,.07);
}
.maintenance-nav-tools{
  display:grid;
  gap:6px;
  padding:7px;
  margin-bottom:3px;
  border:1px solid #d9e4ef;
  border-radius:10px;
  background:#fff;
}
.maintenance-nav-tools label{display:grid;gap:4px;color:#66788d;font-size:9px;font-weight:700}
.maintenance-nav-tools input{
  width:100%;min-height:34px;padding:0 9px;border:1px solid #ccd8e6;border-radius:8px;background:#fafdff
}
.maintenance-nav-tools small{color:#8190a2;font-size:9px}
.maintenance-tabs-grouped .maintenance-tab-group{padding-left:8px!important}
.maintenance-tabs-grouped button[data-tab]{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:7px 9px!important;
  border:1px solid transparent!important;
}
.maintenance-tabs-grouped button[data-tab]>i{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:#e9eef5;color:#526b89;font-style:normal;font-size:10px;font-weight:900
}
.maintenance-tab-copy{display:grid;gap:1px;min-width:0}
.maintenance-tab-copy b{font-size:11px;color:#344a65}
.maintenance-tab-copy small{overflow:hidden;color:#7a899b;font-size:8px;white-space:nowrap;text-overflow:ellipsis}
.maintenance-tabs-grouped button[data-tab].active{
  border-color:#aac1e7!important;
  background:linear-gradient(90deg,#eaf2ff,#f4f8ff)!important;
  box-shadow:0 4px 13px rgba(47,101,216,.10)
}
.maintenance-tabs-grouped button[data-tab].active>i{background:var(--v824-blue);color:#fff}
.maintenance-nav-hidden{display:none!important}
.maintenance-content>.tab-panel{
  padding:14px;
  border:1px solid #dce5ef;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(31,57,91,.06);
  animation:v824-panel-in .18s ease;
}
@keyframes v824-panel-in{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
.maintenance-content .maint-box{
  border-color:#dde6ef;
  border-radius:13px;
  box-shadow:0 4px 13px rgba(31,57,91,.04);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.maintenance-content .maint-box:hover{border-color:#c4d5e7;box-shadow:0 8px 20px rgba(31,57,91,.07)}
.maintenance-section-label{display:grid!important;grid-template-columns:auto 1fr;gap:4px 10px!important}
.maintenance-section-label:after{grid-column:1/-1}
.maintenance-section-label span{font-size:10px;color:#748398}

/* 屏幕适配 */
@media(max-width:1180px){
  .control-filter-panel{grid-template-columns:1fr}
  .control-filter-advanced{grid-column:1}
  .control-action-bar{grid-column:1}
  .control-filter-advanced-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}
  .control-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .control-filter-primary .control-filter-grid,
  .control-filter-advanced-grid{grid-template-columns:1fr 1fr}
  .control-action-bar{align-items:stretch}
  .control-action-primary,.control-action-secondary{width:100%}
  .maintenance-hero-strip{grid-template-columns:auto 1fr}
  .maintenance-hero-badges{grid-column:1/-1;justify-content:flex-start}
  .maintenance-workspace{grid-template-columns:1fr!important}
  .maintenance-workspace .maintenance-tabs-grouped{position:static!important;max-height:none!important}
}
@media(max-width:620px){
  .control-filter-primary .control-filter-grid,
  .control-filter-grid,
  .control-filter-advanced-grid{grid-template-columns:1fr}
  .control-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .control-action-primary button,.control-action-secondary button{flex:1}
  .maintenance-hero-strip{grid-template-columns:1fr}
  .maintenance-hero-icon{width:40px;height:40px}
}


/* v8.24.2 单元格颜色与阈值显示恢复
   这些规则位于最后加载的ui-v824.css中，避免被通用行悬停样式覆盖。 */
.control-display-wrap td.threshold-low:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  color:#1559a5!important;
  font-weight:900!important;
  background:linear-gradient(90deg,rgba(70,144,226,.24),rgba(70,144,226,.10))!important;
  box-shadow:inset 4px 0 0 #4a90e2!important;
}
.control-display-wrap td.threshold-normal:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  color:#22673b!important;
  font-weight:900!important;
  background:linear-gradient(90deg,rgba(121,201,140,.28),rgba(121,201,140,.11))!important;
  box-shadow:inset 4px 0 0 #55ad70!important;
}
.control-display-wrap td.threshold-high:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  color:#a82424!important;
  font-weight:900!important;
  background:linear-gradient(90deg,rgba(224,68,68,.25),rgba(224,68,68,.10))!important;
  box-shadow:inset 4px 0 0 #e04444!important;
}
body.erp-mode .control-display-wrap tr:hover td.threshold-low:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  background:linear-gradient(90deg,rgba(70,144,226,.32),rgba(70,144,226,.15))!important;
}
body.erp-mode .control-display-wrap tr:hover td.threshold-normal:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  background:linear-gradient(90deg,rgba(121,201,140,.36),rgba(121,201,140,.16))!important;
}
body.erp-mode .control-display-wrap tr:hover td.threshold-high:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  background:linear-gradient(90deg,rgba(224,68,68,.34),rgba(224,68,68,.15))!important;
}

/* 恢复周期销量、周期收货数量大于0时的原始绿色高亮逻辑。 */
.control-display-wrap td.sales-hot:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  color:#205f37!important;
  font-weight:900!important;
  background:linear-gradient(90deg,rgba(91,179,112,.24),rgba(91,179,112,.09))!important;
  box-shadow:inset 4px 0 0 #4fae6b!important;
}
.control-display-wrap td.peer-trend-cell.sales-hot .peer-trend-cell-button{
  background:rgba(236,249,239,.76);
}
.control-display-wrap td.peer-trend-cell.sales-hot .peer-trend-cell-button:hover{
  background:rgba(218,242,224,.96);
}
body.erp-mode .control-display-wrap tr:hover td.sales-hot:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  background:linear-gradient(90deg,rgba(91,179,112,.32),rgba(91,179,112,.14))!important;
}
.control-display-wrap td.quantity-zero:not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  color:#7b8797!important;
  background:rgba(244,247,250,.82)!important;
}

/* 恢复变化值单元格的涨跌底色，方向文字仍沿用趋势组件颜色。 */
.control-display-wrap td.up:not(.sales-hot):not(.threshold-low):not(.threshold-normal):not(.threshold-high):not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  background:linear-gradient(90deg,rgba(239,123,103,.14),rgba(239,123,103,.04))!important;
}
.control-display-wrap td.down:not(.sales-hot):not(.threshold-low):not(.threshold-normal):not(.threshold-high):not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  background:linear-gradient(90deg,rgba(61,166,117,.14),rgba(61,166,117,.04))!important;
}
.control-display-wrap td.stable:not(.sales-hot):not(.threshold-low):not(.threshold-normal):not(.threshold-high):not(.crosshair-row-cell):not(.crosshair-col-cell):not(.crosshair-focus-cell){
  background:rgba(244,247,250,.72)!important;
}

/* 阈值单元格中的数字始终继承整格状态色。 */
.control-display-wrap td[data-threshold-state]{
  font-variant-numeric:tabular-nums;
}