@import url('shared.css');

/* ==================== MES Module Specific Styles ==================== */

/* ==================== 头部身份切换（mes-identity-switcher）====================
   与商品主数据中心 product-style.css 的 .role-switcher 同款（chip + dropdown），
   保证两个模块的头部视觉一致；此处为同名规则的 MES 侧副本（各模块 CSS 独立加载）。 */
.role-switcher{position:relative}
.role-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--color-border);border-radius:16px;cursor:pointer;background:var(--color-bg-page);transition:all .2s;font-size:13px;color:var(--color-text-primary)}
.role-chip:hover{border-color:var(--color-primary);background:var(--color-primary-light)}
.role-chip-name{font-weight:500}
.role-chip-arrow{color:var(--color-text-muted);transition:transform .2s}
.role-dropdown{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--color-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;z-index:1200}
.role-option{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--color-text-body);transition:background .15s;white-space:nowrap}
.role-option>span:last-child{margin-left:auto;padding-left:12px}
.role-option:hover{background:var(--color-bg-page)}
.role-option.active{background:var(--color-primary-light);color:var(--color-primary);font-weight:600}
.role-tag{font-size:11px;color:var(--color-primary);background:var(--color-primary-light);padding:1px 8px;border-radius:10px;font-weight:500;white-space:nowrap}
/* 浮层分组标题（工作组 / 角色） */
.identity-group-title{display:flex;align-items:center;gap:6px;padding:6px 12px 4px;font-size:12px;font-weight:600;color:var(--color-text-secondary)}
.identity-group-title span{font-size:11px;font-weight:400;color:var(--color-text-muted)}
.identity-group-title:not(:first-child){border-top:1px solid var(--color-border);margin-top:4px;padding-top:8px}

/* Search bar layout */
.search-bar{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}
.search-row{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}
.search-row .form-group{flex:1;min-width:180px;margin-bottom:0}
.search-row .form-group label{display:block;font-size:13px;font-weight:500;color:var(--color-text-secondary);margin-bottom:6px}
.search-actions{display:flex;align-items:center;gap:var(--spacing-sm)}
.search-actions .btn{height:36px}
.search-actions .btn iconify-icon{display:inline-flex;width:14px;height:14px}

/* Stat card icon variants */
.stat-icon.cyan{background:#E6F9F7;color:#00B8A9}
.stat-icon.red{background:#FEF0F0;color:#F56C6C}

/* ==================== MES 统计卡 ====================
   shared.css 只定义了 .stat-card（flex row），未定义 .stat-value/.stat-label，
   MES 页面依赖内联样式，导致：长文本撑破 grid 的 1fr（auto 最小宽）→ 卡片宽窄不一、
   内部换行 → 高度参差。此处补齐并保证等宽等高、溢出省略。 */
.stat-card{min-width:0;padding:12px 14px;gap:10px;align-items:center}
.stat-card .stat-icon{width:34px;height:34px;font-size:17px}
.stat-card .stat-info{min-width:0;flex:1 1 auto;overflow:hidden}
.stat-value{font-size:20px;font-weight:700;line-height:1.2;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-label{font-size:12px;line-height:1.4;color:var(--color-text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-label .stat-sub{display:block;font-size:11px;color:#B0B4BA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 统计卡行：等分宽度（minmax(0,1fr) 防止长内容撑破） */
.mes-stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.mes-stat-row>*{min-width:0}
/* 详情头卡：10 列口径区，等分 + 长文本省略 */
.mes-head-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 1.2fr repeat(4,minmax(0,1fr));gap:16px}
.mes-head-grid>div{min-width:0;overflow:hidden}
.mes-head-grid .hd-label{font-size:12px;color:#909399;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mes-head-grid .hd-sub{font-size:11px;color:#999;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Capacity utilization bar */
.cap-row{display:grid;grid-template-columns:120px 1fr 80px 80px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #E4E7ED}
.cap-row:last-child{border-bottom:none}
.cap-line-name{font-size:13px;color:#333;font-weight:500}
.cap-bar-wrap{height:18px;background:#E4E7ED;border-radius:10px;overflow:hidden;position:relative}
.cap-bar{height:100%;border-radius:10px;transition:width .6s;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#fff;font-weight:500}
.cap-bar.green{background:linear-gradient(90deg,#36B37E,#4dd391)}
.cap-bar.yellow{background:linear-gradient(90deg,#F5A623,#ffc14d)}
.cap-bar.red{background:linear-gradient(90deg,#F56C6C,#ff8585)}
.cap-status{font-size:12px;text-align:center}

/* Gantt chart */
.gantt-wrap{overflow-x:auto;border:1px solid #E4E7ED;border-radius:6px}
.gantt{min-width:900px;font-size:12px}
.gantt-header{display:grid;grid-template-columns:120px repeat(16,1fr);background:#FAFAFA;border-bottom:1px solid #E4E7ED;position:sticky;top:0;z-index:2}
.gantt-header div{padding:8px 4px;text-align:center;color:#666;font-weight:500;border-right:1px solid #E4E7ED;font-size:11px}
.gantt-header div:first-child{text-align:left;padding-left:12px}
.gantt-row{display:grid;grid-template-columns:120px repeat(16,1fr);border-bottom:1px solid #E4E7ED;min-height:42px;align-items:center}
.gantt-label{padding:8px 12px;font-weight:500;color:#333;border-right:1px solid #E4E7ED;background:#fff;position:sticky;left:0;z-index:1}
.gantt-cell{border-right:1px solid #f0f0f0;height:100%;min-height:42px;position:relative}
.gantt-bar{position:absolute;top:6px;bottom:6px;border-radius:4px;display:flex;align-items:center;padding:0 6px;color:#fff;font-size:11px;overflow:hidden;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.gantt-bar.semi{background:linear-gradient(90deg,#F5A623,#ffc14d)}
.gantt-bar.bread{background:linear-gradient(90deg,#00B8A9,#4dd9cb)}
.gantt-bar.cake{background:linear-gradient(90deg,#7C3AED,#a78bfa)}
.gantt-bar.transfer{background:linear-gradient(90deg,#409EFF,#79bbff);border:2px dashed #fff}

/* Schedule level badge */
.badge-amber{background:#FFF8E6;color:#F5A623}
.badge-cyan{background:#E6F9F7;color:#00B8A9}

/* Forecast source tag */
.forecast-tag{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:3px;font-size:11px;background:#F3E8FF;color:#7C3AED;font-weight:500}

/* Transfer record indicator */
.transfer-arrow{display:inline-flex;align-items:center;gap:4px;color:#409EFF;font-size:12px;font-weight:500}

/* Capacity dashboard grid */
.cap-dashboard{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

/* MRP source chips */
.mrp-source{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;margin-right:4px}
.mrp-source.store{background:#E6F9F7;color:#00B8A9}
.mrp-source.oem{background:#FFF8E6;color:#F5A623}
.mrp-source.ecom{background:#ECF5FF;color:#409EFF}
.mrp-source.forecast{background:#F3E8FF;color:#7C3AED}
.mrp-source.mts{background:#E6F9EE;color:#36B37E}

/* Semi-product demand highlight */
tr.semi-row{background:#FFFBF0}
tr.semi-row:hover{background:#FFF8E6}

/* Plan version tag */
.version-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;background:#f0f0f0;color:#666;margin-left:6px}

/* Alert list for dashboard */
.alert-list-mes{display:flex;flex-direction:column;gap:10px}
.alert-item-mes{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:6px;background:#FAFAFA}
.alert-item-mes.warn{background:#FFF8E6;border-left:3px solid #F5A623}
.alert-item-mes.danger{background:#FEF0F0;border-left:3px solid #F56C6C}
.alert-item-mes.info{background:#ECF5FF;border-left:3px solid #409EFF}
.alert-item-mes .alert-icon{flex-shrink:0;margin-top:1px}
.alert-item-mes .alert-body{font-size:13px;color:#333;flex:1}
.alert-item-mes .alert-time{font-size:11px;color:#999;margin-top:2px}

/* Time axis label */
.time-axis{display:flex;justify-content:space-between;padding:0 4px;font-size:11px;color:#999;margin-bottom:6px}

/* ==================== Equipment Management (v1.1) ==================== */
.eq-util-row{display:grid;grid-template-columns:200px 1fr 80px 80px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #E4E7ED}
.eq-util-row:last-child{border-bottom:none}
.eq-name{font-size:13px;color:#333;font-weight:500}
.eq-share-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;margin-left:4px;font-weight:400}
.eq-share-tag.shared{background:#ECF5FF;color:#409EFF}
.eq-share-tag.wg{background:#FFF8E6;color:#F5A623}
.eq-share-tag.exclusive{background:#E6F9F7;color:#00B8A9}

/* ==================== Work Group Management (v1.1) ==================== */
.wg-timeline-wrap{padding:4px 0}
.wg-timeline-axis{display:flex;justify-content:space-between;padding:0 0 4px 120px;font-size:11px;color:#999;margin-bottom:4px;border-bottom:1px solid #E4E7ED}
.wg-timeline-rows{display:flex;flex-direction:column;gap:4px}
.wg-tl-row{display:grid;grid-template-columns:120px 1fr;align-items:center;height:28px;position:relative}
.wg-tl-label{font-size:12px;font-weight:500;color:#333;padding-right:8px}
.wg-tl-bar{position:relative;height:20px;border-radius:4px;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:11px;overflow:hidden;white-space:nowrap}
.wg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.wg-card{background:#fff;border:1px solid #E4E7ED;border-radius:6px;overflow:hidden;transition:box-shadow .2s}
.wg-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.wg-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#FAFAFA;border-bottom:1px solid #E4E7ED}
.wg-card-header .wg-name{font-size:14px;font-weight:600;color:#333}
.wg-card-body{padding:10px 14px}
.wg-info{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid #f5f5f5}
.wg-info:last-child{border-bottom:none}
.wg-info span{color:#999}
.wg-info strong{color:#333;font-weight:500}

/* ==================== Dispatch Order Management (v1.1) ==================== */
.conf-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-weight:500}
.conf-tag.high{background:#E6F9EE;color:#36B37E}
.conf-tag.medium{background:#FFF8E6;color:#F5A623}
.conf-tag.low{background:#FEF0F0;color:#F56C6C}
tr.diff-row{background:#FEF0F0}
tr.diff-row:hover{background:#FDE2E2}
.prio-tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
.prio-tag.prio-1{background:#FEF0F0;color:#F56C6C}
.prio-tag.prio-2{background:#FFF8E6;color:#F5A623}
.prio-tag.prio-3{background:#E6F9F7;color:#00B8A9}

/* MRP Manual Adjust (v1.2) */
tr.manual-adjust{background:#FFF8F0}
tr.manual-adjust:hover{background:#FFF0E0}
.manual-adjust strong{font-weight:600}

/* ==================== Breadcrumb & Tabs (v1.2) ==================== */
.breadcrumb-bar{display:flex;align-items:center;gap:6px;padding:0 0 16px;font-size:13px}
.tab-bar{display:flex;gap:0;border-bottom:2px solid #E4E7ED;margin-bottom:16px}
.tab-item{display:flex;align-items:center;gap:6px;padding:10px 20px;font-size:14px;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.tab-item:hover{color:#00B8A9}
.tab-item.active{color:#00B8A9;border-bottom-color:#00B8A9;font-weight:500}
.tab-count{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;background:#E4E7ED;color:#666;border-radius:9px;font-size:11px;padding:0 5px}
.tab-item.active .tab-count{background:#E6F9F7;color:#00B8A9}
/* 状态 tab 计数为 0：置灰不可点 */
.tab-item.empty{color:#c0c4cc !important;cursor:not-allowed}
.tab-item.empty .tab-count{background:#F5F6F7;color:#c0c4cc}
/* 子列表页的子行就地展开区 */
.pwo-sub-pane,.vat-sub-pane{border-left:3px solid #00B8A9;padding:12px 16px;background:#FAFBFC}
.pwo-sub-pane .table-wrapper,.vat-sub-pane .table-wrapper{margin:0}

/* ==================== 工序工单：二级子 tab（按钮/页签式，与一级下划线 tab 区分，2026-10-12） ==================== */
.pwo-sub-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pwo-sub-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:13px;color:#666;background:#fff;border:1px solid #DCDFE6;border-radius:6px;cursor:pointer;transition:all .15s}
.pwo-sub-tab:hover{color:#00B8A9;border-color:#00B8A9}
.pwo-sub-tab.active{background:#00B8A9;border-color:#00B8A9;color:#fff;font-weight:500}
.pwo-sub-tab.active .tab-count{background:rgba(255,255,255,.28);color:#fff}
.pwo-sub-tab.empty{color:#c0c4cc;background:#F5F7FA;border-color:#E4E7ED;cursor:not-allowed}
.pwo-sub-tab.empty:hover{color:#c0c4cc;border-color:#E4E7ED}
.pwo-sub-tab.empty .tab-count{background:#EBEEF5;color:#c0c4cc}

/* ==================== 工序工单：接收物料轴 左栏物料（接收总数）/ 右栏上道交接明细（2026-10-12） ==================== */
.pwo-in-wrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.pwo-in-mats{flex:0 0 272px;max-width:100%}
.pwo-in-detail{flex:1 1 480px;min-width:0}
.pwo-in-mat{padding:10px 14px;border-bottom:1px solid #F0F2F5;cursor:pointer;border-left:3px solid transparent;transition:all .15s}
.pwo-in-mat:last-child{border-bottom:none}
.pwo-in-mat:hover{background:#F7FDFC}
.pwo-in-mat.active{background:#E6F9F7;border-left-color:#00B8A9}
.pwo-in-mat .mat-name,.pwo-out-mat .mat-name{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:#333}
.pwo-in-mat .mat-total{font-size:18px;font-weight:700;color:#00B8A9;margin-top:4px;line-height:1.3;word-break:break-all}
.pwo-in-mat .mat-sub,.pwo-out-mat .mat-sub,.pwo-out-mat .mat-cap{font-size:11px;color:#909399;margin-top:3px;line-height:1.6}
.pwo-in-mat.active .mat-name,.pwo-out-mat.active .mat-name{color:#0F766E}

/* 产出物料轴：左栏规格（同分栏骨架）+ 规格条目 + 交接进度条 */
.pwo-out-wrap{align-items:stretch}
.pwo-out-mats{flex:0 0 272px;max-width:100%}
.pwo-out-detail{flex:1 1 520px;min-width:0}
.pwo-out-mat{padding:10px 14px;border-bottom:1px solid #F0F2F5;cursor:pointer;border-left:3px solid transparent;transition:all .15s}
.pwo-out-mat:last-child{border-bottom:none}
.pwo-out-mat:hover{background:#F7FDFC}
.pwo-out-mat.active{background:#E6F9F7;border-left-color:#00B8A9}
.pwo-out-bar{height:6px;background:#E4E7ED;border-radius:3px;margin-top:6px;overflow:hidden}
.pwo-out-bar span{display:block;height:100%;background:#00B8A9;border-radius:3px}
/* 报工记录抽屉（shared.css 的 .drawer 默认常显，MES 这里补滑入显隐；openDrawer/closeDrawer 加/去 .active） */
.drawer{transform:translateX(100%);transition:transform .3s ease;visibility:hidden}
.drawer.active{transform:translateX(0);visibility:visible}
/* 抽屉内的范围切换（交接记录：本产品 / 本规格全部） */
.pwo-seg-lite{display:inline-flex;background:#F0F2F5;border-radius:6px;padding:3px;gap:3px}
.pwo-seg-lite span{padding:3px 12px;font-size:12px;color:#666;border-radius:4px;cursor:pointer;transition:all .15s}
.pwo-seg-lite span:hover{color:#00B8A9}
.pwo-seg-lite span.active{background:#fff;color:#00B8A9;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* 次品/废品轴：左栏物料汇总 + 右栏明细（同左右分栏骨架，2026-10-13） */
.pwo-scrap-wrap{align-items:stretch}
.pwo-scrap-mats{flex:0 0 272px;max-width:100%}
.pwo-scrap-detail{flex:1 1 520px;min-width:0}
.pwo-scrap-mat{padding:10px 14px;border-bottom:1px solid #F0F2F5;cursor:pointer;border-left:3px solid transparent;transition:all .15s}
.pwo-scrap-mat:last-child{border-bottom:none}
.pwo-scrap-mat:hover{background:#F7FDFC}
.pwo-scrap-mat.active{background:#E6F9F7;border-left-color:#00B8A9}
.pwo-scrap-mat .mat-name{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600;color:#333}
.pwo-scrap-mat .mat-sub{font-size:11px;color:#909399;margin-top:3px;line-height:1.6}
.pwo-scrap-mat.active .mat-name{color:#0F766E}

/* ==================== Sidebar Group Submenu (v1.2) ==================== */
.nav-group{margin-bottom:0}
.nav-group-header{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;color:#666;font-size:14px;transition:all .2s;border-left:3px solid transparent}
.nav-group-header:hover{color:#00B8A9;background:rgba(0,184,169,.04)}
.nav-group-header .nav-icon{display:flex;width:20px;height:20px;align-items:center;justify-content:center;cursor:default}
.nav-group-header .nav-label{flex:1}
.nav-group-arrow{font-size:14px;color:#ccc;transition:transform .2s;cursor:default}
.nav-group.expanded .nav-group-arrow{transform:rotate(180deg)}
.nav-submenu{overflow:hidden}
.nav-submenu .nav-item{padding-left:48px;font-size:13px}

/* Decompose icon */
.decomp-icon{display:inline-flex;width:24px;height:24px;border-radius:4px;align-items:center;justify-content:center;font-size:12px;font-weight:600;margin-right:6px;vertical-align:middle}

/* ==================== Shortage & Purchase Type (v1.3) ==================== */
tr.shortage-row{background:#FFF8F8}
tr.shortage-row:hover{background:#FFEAEA}
.pur-type-tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.pur-type-tag.urgent{background:#FEF0F0;color:#F56C6C;border:1px solid #F56C6C}
.pur-type-tag.mrp{background:#ECF5FF;color:#409EFF;border:1px solid #409EFF}
.pur-type-tag.safety{background:#E6F9EE;color:#36B37E;border:1px solid #36B37E}
.pur-type-tag.manual{background:#F5F5F5;color:#999;border:1px solid #ccc}
.shortage-reason{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:500}
.shortage-reason.demand-surge{background:#FEF0F0;color:#F56C6C}
.shortage-reason.safety-low{background:#FFF8E6;color:#F5A623}
.shortage-reason.supplier-delay{background:#ECF5FF;color:#409EFF}
.shortage-reason.stock-diff{background:#F3E8FF;color:#7C3AED}
.shortage-stat-row{display:grid;grid-template-columns:120px 1fr 80px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}
.shortage-stat-row:last-child{border-bottom:none}

/* 表单提示小字（弹窗输入框下方，避免长 label 换行错位） */
.form-hint{font-size:11px;line-height:1.4;color:#F5A623;margin-top:4px;white-space:nowrap}
.form-group{margin-bottom:0}
.mes-head-grid .hd-value{font-size:16px;font-weight:600;line-height:1.3;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}