/* ═══════════════════════════════════════════════════════════
   排产计划管理系统 - 样式表
   Element-UI 主题适配 + 自定义布局样式
   ═══════════════════════════════════════════════════════════ */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.6;
    min-height: 100vh;
}

/* ── Top Navigation ── */
.top-nav {
    background: var(--gray-900);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}
.nav-brand h1 { font-size: 1.25rem; font-weight: 600; }
.nav-role { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-300); font-size: 0.875rem; }
.nav-role .el-dropdown-link { color: white !important; }

/* ── Progress Bar Container ── */
.progress-bar-container {
    background: white;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
}

/* ── Main Content ── */
.main-content {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1.5rem;
}

/* ── Footer ── */
.app-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--gray-400);
    font-size: 0.8rem;
}

/* ── Element-UI 样式覆盖 ── */
/* 让 el-tabs 更紧凑 */
.el-tabs__header { margin-bottom: 1rem; }
.el-tabs__nav-wrap::after { height: 1px; }
.el-tabs__item { font-size: 0.9rem; }

/* 让 el-card 有合理的间距 */
.el-card { margin-bottom: 1rem; }
.el-card__header { padding: 0.75rem 1.25rem; }

/* el-table 紧凑化 */
.el-table th, .el-table td { padding: 6px 0; }
.el-table th .cell { font-size: 0.8rem; color: var(--gray-600); font-weight: 600; }

/* el-dialog 标题 */
.el-dialog__header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-200); }
.el-dialog__body { padding: 1.25rem; }
.el-dialog__footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--gray-200); }

/* el-steps 步骤条 */
.el-steps { padding: 0.5rem 0; }
.el-step__head { cursor: default; }
.el-step__title { font-size: 0.85rem; }

/* el-collapse 折叠面板（工人排班等） */
.el-collapse { border: none; }
.el-collapse-item__header {
    height: auto;
    min-height: 48px;
    line-height: 1.5;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
    background: transparent;
}
.el-collapse-item__wrap {
    border-bottom: 1px solid var(--gray-200);
}
.el-collapse-item__content {
    padding: 0.75rem 0;
}

/* ── 饱和度矩阵 ── */
.saturation-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.saturation-matrix th,
.saturation-matrix td {
    border: 1px solid var(--gray-200);
    padding: 8px 6px;
    text-align: center;
    vertical-align: middle;
}
.saturation-matrix thead th {
    background: var(--gray-100);
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.8rem;
    white-space: nowrap;
}
.saturation-matrix .proc-cell {
    text-align: left;
    white-space: nowrap;
    background: var(--gray-50);
    font-size: 0.85rem;
    min-width: 120px;
    position: sticky;
    left: 0;
    z-index: 1;
}
.saturation-matrix .day-cell {
    min-width: 80px;
}
.sat-circle {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── 工人负载矩阵 ── */
.worker-load-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.worker-load-matrix th,
.worker-load-matrix td {
    border: 1px solid var(--gray-200);
    padding: 6px 4px;
    text-align: center;
    vertical-align: middle;
}
.worker-load-matrix thead th {
    background: var(--gray-100);
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.8rem;
    white-space: nowrap;
}
.worker-load-matrix .wl-worker-col {
    text-align: left;
    white-space: nowrap;
    background: var(--gray-50);
    font-size: 0.85rem;
    min-width: 140px;
    position: sticky;
    left: 0;
    z-index: 1;
}
.worker-load-matrix .wl-day-col {
    min-width: 72px;
}
.worker-load-matrix tbody tr:hover td:not(.wl-worker-col) {
    background: var(--gray-50);
}

/* ── 甘特图 ── */
.gantt-chart {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow-x: auto;
}
.gantt-header {
    display: flex;
    background: var(--gray-100);
    border-bottom: 2px solid var(--gray-200);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
}
.gantt-row {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    min-height: 44px;
}
.gantt-row:last-child {
    border-bottom: none;
}
.gantt-row:hover {
    background: var(--gray-50);
}
.gantt-label-col {
    flex: 0 0 160px;
    padding: 8px 12px;
    border-right: none;
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.85rem;
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}
.gantt-timeline-col {
    flex: 1;
    display: flex;
    min-width: 0;
}
.gantt-date-label {
    flex: 1;
    min-width: 60px;
    text-align: center;
    padding: 6px 2px;
    border-right: 1px solid var(--gray-200);
    font-size: 0.8rem;
}
.gantt-date-label:last-child {
    border-right: none;
}
.gantt-cell {
    flex: 1;
    min-width: 60px;
    border-right: 1px solid var(--gray-100);
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}
.gantt-cell:last-child {
    border-right: none;
}
.gantt-today {
    background: #fffde7 !important;
}
.gantt-weekend {
    background: var(--gray-50);
}
.gantt-entry {
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.7rem;
    text-align: center;
    color: var(--gray-700);
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}
.gantt-entry-text {
    pointer-events: none;
}
.gantt-completed {
    opacity: 0.6;
}
.gantt-overdue {
    background: #fff5f5 !important;
}
.gantt-deadline-marker {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e6a23c;
    pointer-events: none;
    z-index: 2;
}

/* ── Alerts ── */
.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-left: 4px solid var(--warning);
    background: #fffbeb;
    margin-bottom: 0.5rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.alert-item.read {
    border-left-color: var(--gray-300);
    background: var(--gray-50);
    opacity: 0.7;
}
.alert-message { flex: 1; font-size: 0.85rem; }
.alert-time { font-size: 0.75rem; color: var(--gray-500); margin-right: 0.75rem; }

/* ── Utility ── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 0.5rem; }
.text-sm { font-size: 0.85rem; }
.text-muted { color: var(--gray-500); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }

/* ── Order Items (inline form) ── */
.order-item-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
.order-item-row .form-input { flex: 1; }
.order-item-row .form-select { flex: 1; }

/* ── Feasibility Result ── */
.feasibility-result {
    padding: 0.75rem;
    border-radius: var(--radius);
    margin-top: 0.75rem;
    font-size: 0.85rem;
}
.feasibility-normal { background: #d1fae5; color: #065f46; }
.feasibility-tight { background: #fef3c7; color: #92400e; }
.feasibility-extend { background: #fed7aa; color: #9a3412; }
.feasibility-insufficient { background: #fee2e2; color: #991b1b; }

/* ── Loading ── */
.loading {
    text-align: center;
    padding: 2rem;
    color: var(--gray-500);
}

/* ═══════════════════════════════════════════════════════════
   Mobile Responsive (≤ 768px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .top-nav {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    .nav-brand h1 { font-size: 1rem; }

    .main-content { padding: 0 0.75rem; margin: 1rem auto; }

    .el-tabs__item { font-size: 0.8rem; padding: 0 0.75rem; }
    .el-card { padding: 0.75rem; }
    .el-dialog { width: 95% !important; }
}

/* ═══════════════════════════════════════════════════════════
   Large Screen (≥ 1600px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
    .top-nav {
        padding: 0.75rem 3rem;
    }
    .progress-bar-container {
        padding: 1rem 3rem;
    }
    .main-content {
        max-width: 1500px;
    }

    /* 表格更宽松 */
    .el-table th, .el-table td { padding: 8px 0; }
    .el-table th .cell { font-size: 0.85rem; }

    /* 卡片间距 */
    .el-card { margin-bottom: 1.25rem; }
    .el-card__header { padding: 0.875rem 1.5rem; }
    .el-card__body { padding: 1.5rem; }

    /* 告警条目更宽松 */
    .alert-item { padding: 1rem; }

    /* 弹窗加宽由 JS 动态处理 */
}

/* ═══════════════════════════════════════════════════════════
   Ultrawide (≥ 2000px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 2000px) {
    body { font-size: 15px; }

    .top-nav {
        padding: 1rem 4rem;
    }
    .nav-brand h1 { font-size: 1.4rem; }

    .progress-bar-container {
        padding: 1.25rem 4rem;
    }
    .el-steps { padding: 0.75rem 0; }
    .el-step__title { font-size: 0.95rem; }

    .main-content {
        max-width: 1800px;
        margin: 2rem auto;
        padding: 0 2rem;
    }

    /* 表格更宽松 */
    .el-table th, .el-table td { padding: 10px 0; }
    .el-table th .cell { font-size: 0.9rem; }

    /* 卡片 */
    .el-card { margin-bottom: 1.5rem; }
    .el-card__header { padding: 1rem 1.75rem; }
    .el-card__body { padding: 1.75rem; }

    /* 告警条目 */
    .alert-item { padding: 1rem 1.25rem; }
    .alert-message { font-size: 0.9rem; }

    /* 底部 */
    .app-footer { padding: 2rem; font-size: 0.9rem; }

    /* 弹窗加宽由 JS 动态处理 */
}

/* ═══════════════════════════════════════════════════════════
   Super Ultrawide (≥ 2560px)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 2560px) {
    body { font-size: 16px; }

    .top-nav {
        padding: 1rem 6rem;
    }
    .progress-bar-container {
        padding: 1.5rem 6rem;
    }

    .main-content {
        max-width: 2200px;
        margin: 2.5rem auto;
        padding: 0 2.5rem;
    }

    /* 全局模态框上限 */
    .el-dialog { max-width: 90vw; }

    /* 表格 */
    .el-table th, .el-table td { padding: 12px 0; }

    /* 卡片 */
    .el-card__body { padding: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   登录页面样式
   ═══════════════════════════════════════════════════════════ */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #1d4ed8 100%);
    padding: 1rem;
}

.login-card {
    background: white;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.5rem;
}

.login-header p {
    font-size: 0.8rem;
    color: var(--gray-400);
    letter-spacing: 0.05em;
}

.login-form .el-form-item {
    margin-bottom: 1.5rem;
}

.login-form .el-input__inner {
    height: 48px;
    line-height: 48px;
    font-size: 0.95rem;
    border-radius: 8px;
}

.login-form .el-button--primary {
    height: 48px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    letter-spacing: 0.1em;
}

/* ── 顶部导航栏操作区 ── */
.nav-actions {
    display: flex;
    align-items: center;
}

.nav-user {
    color: var(--gray-300);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════
   Worker Capability Grid (工人能力网格)
   ═══════════════════════════════════════════════════════════ */

/* 工人列表项 */
.wc-worker-item {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
    margin-bottom: 4px;
}

.wc-worker-item:hover {
    background: #f3f4f6;
}

.wc-worker-item.active {
    background: #ecfdf5;
    border-color: #67C23A;
}

.wc-worker-item.lookup-highlight {
    background: #fef3cd;
    border-color: #f0ad4e;
    box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.2);
}

.wc-worker-item.active.lookup-highlight {
    background: #ecfdf5;
    border-color: #67C23A;
    box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.3);
}

/* 产品类型卡片 */
.wc-category-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.wc-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f9fafb;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.wc-category-header:hover {
    background: #f3f4f6;
}

/* 色块网格 */
.wc-diameter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
}

/* 色块单元格 */
.wc-diameter-cell {
    width: 52px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s;
    user-select: none;
}

/* 绿色 - 能做 */
.wc-diameter-cell.wc-cell-green {
    background: #67C23A;
    color: white;
    cursor: pointer;
}

.wc-diameter-cell.wc-cell-green:hover {
    background: #529b2e;
    transform: scale(1.05);
}

/* 灰色 - 不能做 */
.wc-diameter-cell.wc-cell-gray {
    background: #e5e7eb;
    color: #9ca3af;
}

.wc-diameter-cell.wc-cell-gray:hover {
    background: #d1d5db;
}

/* 可编辑模式下的灰色色块 */
.worker-capability-root .wc-diameter-cell {
    cursor: default;
}

/* 外径值文字 */
.wc-diameter-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48px;
}
}

/* ═══════════════════════════════════════════════════════════
 * 工序分工视图
 * ═══════════════════════════════════════════════════════════ */

/* 左侧工序列表项 */
.pa-process-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 4px;
    margin-bottom: 2px;
}

.pa-process-item:hover {
    background: #f5f7fa;
}

.pa-process-item.active {
    background: #ecf5ff;
    border-left: 3px solid #409EFF;
    padding-left: 9px;
}

/* 产品分类卡片 */
.pa-category-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.pa-category-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #ebeef5;
}

/* 网格单元格状态 */
.pa-cell-empty {
    background: #f3f4f6;
    color: #9ca3af;
}

.pa-cell-assigned {
    cursor: default;
    transition: all 0.15s;
}

.pa-cell-assigned:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1;
    position: relative;
}

.pa-cell-conflict {
    border: 2px solid #F56C6C !important;
    cursor: help;
}

.pa-cell-faded {
    opacity: 0.2;
}

/* 图例 */
.pa-legend {
    margin-top: 16px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pa-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.15s;
}

.pa-legend-item:hover {
    background: #e5e7eb;
}

.pa-legend-item.faded {
    opacity: 0.3;
}

.pa-legend-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* ── 产能矩阵表格 ── */
.capacity-matrix-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}
.capacity-matrix-table th,
.capacity-matrix-table td {
    border: 1px solid #e4e7ed;
    padding: 6px 10px;
    text-align: center;
    white-space: nowrap;
}
.capacity-matrix-table thead th {
    background: #f5f7fa;
    font-weight: 600;
    color: #303133;
}
.capacity-matrix-table tbody tr:hover {
    background: #f5f7fa;
}
.capacity-matrix-table .matrix-cell {
    cursor: pointer;
    transition: background 0.15s;
}
.capacity-matrix-table .matrix-cell:hover {
    background: #ecf5ff;
    color: #409eff;
}

/* ═══════════════════════════════════════════════════════════
   数控车床模拟模块样式
   ═══════════════════════════════════════════════════════════ */

.cnc-lathe-simulation .input-controls {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.cnc-lathe-simulation .main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.cnc-lathe-simulation .sop-empty-hint {
    color: #999;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
}

.cnc-lathe-simulation .sop-horizontal {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.cnc-lathe-simulation .sop-h-item {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    background: var(--gray-50, #f9fafb);
    border-radius: 6px;
    border: 1px solid var(--gray-200);
}

.cnc-lathe-simulation .sop-h-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.3rem;
    white-space: nowrap;
}

.cnc-lathe-simulation .sop-h-text {
    font-size: 0.8rem;
    color: var(--gray-600);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cnc-lathe-simulation .editor-card {
    height: 600px;
    display: flex;
    flex-direction: column;
}

.cnc-lathe-simulation .editor-card .el-card__header {
    flex-shrink: 0;
    padding: 12px 20px;
}

.cnc-lathe-simulation .editor-card .el-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    overflow: hidden;
}

.cnc-lathe-simulation .editor-wrapper {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.cnc-lathe-simulation .execution-controls {
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cnc-lathe-simulation .speed-controls {
    padding: 8px 0;
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cnc-lathe-simulation .speed-label {
    font-size: 0.85rem;
    color: var(--gray-600);
    white-space: nowrap;
}

.cnc-lathe-simulation .execution-step-nav {
    margin-top: 6px;
    padding: 6px 0 0;
    border-top: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.cnc-lathe-simulation .execution-step-nav__info {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin: 0 4px;
    white-space: nowrap;
}

.cnc-lathe-simulation .editor-wrapper .CodeMirror {
    height: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
}

.cnc-lathe-simulation .simulation-card {
    height: 600px;
    position: relative;
    overflow: hidden;
}

.cnc-lathe-simulation .simulation-container {
    height: 520px;
    width: 100%;
}

.cnc-lathe-simulation .toolbar {
    display: flex;
    align-items: center;
}

@media (max-width: 1200px) {
    .cnc-lathe-simulation .main-content {
        grid-template-columns: 1fr;
    }
    .cnc-lathe-simulation .simulation-card {
        grid-column: span 1;
    }
}

/* ── CNC Lathe Wrapper (步骤导航 + 3D预览) ── */
.cnc-lathe-wrapper {
    display: flex;
    gap: 0;
    min-height: 660px;
    height: 100%;
    font-size: 0.85rem;
}

.cnc-lathe-wrapper .clw-nav {
    width: 110px;
    flex-shrink: 0;
    background: var(--gray-50, #f9fafb);
    border-right: 1px solid var(--gray-200, #e5e7eb);
    padding: 12px 0;
}

.clw-nav-header {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0 12px 12px;
    color: var(--gray-700, #374151);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    margin-bottom: 8px;
}

.clw-nav-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--gray-500, #6b7280);
    user-select: none;
}
.clw-nav-step:hover:not(.clw-nav-step--disabled) {
    background: var(--gray-100, #f3f4f6);
}
.clw-nav-step--active {
    background: #ecf5ff;
    color: #409eff;
    font-weight: 600;
}
.clw-nav-step--done {
    color: #67c23a;
}
.clw-nav-step--done .clw-step-icon {
    border-color: #67c23a;
    background: #f0f9eb;
}
.clw-nav-step--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.clw-nav-step--active .clw-step-icon {
    border-color: #409eff;
    background: #ecf5ff;
}

.clw-step-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--gray-300, #d1d5db);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: #fff;
}

.clw-step-label {
    font-size: 0.8rem;
    white-space: nowrap;
}

.clw-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.clw-preview-row {
    display: flex;
    height: 260px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    position: relative;
    overflow: hidden;
}

.clw-preview {
    flex: 1;
    min-width: 0;
    background: #f0f0f0;
    position: relative;
    overflow: hidden;
}
.clw-preview--hidden {
    display: none;
}
.clw-preview-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 0.9rem;
    text-align: center;
    pointer-events: none;
    z-index: 10;
}
.clw-preview canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.clw-2d-section {
    flex: 1;
    min-width: 0;
    background: #fff;
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--gray-200, #e5e7eb);
}
.clw-2d-section canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.clw-step-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.clw-step-panel {
    max-width: 100%;
}
.clw-step-panel--full {
    padding: 0;
    max-width: 100%;
    height: 100%;
}
.clw-step-panel--full .cnc-lathe-simulation {
    height: 100%;
}
.clw-step-panel--full .cnc-lathe-simulation .main-content {
    grid-template-columns: 2fr 3fr;
}
.clw-step-panel--full .cnc-lathe-simulation .editor-card {
    height: auto;
    min-height: 480px;
}
.clw-step-panel--full .cnc-lathe-simulation .simulation-card {
    display: block;
}

/* ── 分步执行导航条 ── */
.sim-step-nav {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--gray-50, #f9fafb);
    border-radius: 6px;
    overflow: hidden;
}
.sim-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px 6px;
    cursor: pointer;
    border-right: 1px solid var(--gray-200);
    transition: all 0.15s;
    user-select: none;
}
.sim-step-item:last-child { border-right: none; }
.sim-step-item:hover { background: var(--gray-100, #f3f4f6); }
.sim-step-item--done { color: var(--success, #16a34a); }
.sim-step-item--active { background: #e0f2fe; color: var(--primary, #2563eb); }
.sim-step-item--current-done { background: #dcfce7; color: var(--success, #16a34a); }

.sim-step-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid var(--gray-300);
    margin-bottom: 2px;
}
.sim-step-item--done .sim-step-circle {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
    color: #fff;
}
.sim-step-item--active .sim-step-circle {
    border-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
}
.sim-step-item--current-done .sim-step-circle {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
    color: #fff;
}
.sim-step-label {
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── 步骤信息面板 ── */
.sim-step-info {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f0f7ff;
    border-radius: 6px;
    border: 1px solid #dbeafe;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.sim-step-info__step {
    font-weight: 700;
    color: var(--primary, #2563eb);
    white-space: nowrap;
}
.sim-step-info__name {
    font-weight: 600;
    color: var(--gray-800);
}
.sim-step-info__tool {
    color: var(--gray-600);
    padding: 1px 6px;
    background: #e8e8e8;
    border-radius: 4px;
}
.sim-step-info__dir {
    color: var(--gray-500);
    font-size: 0.75rem;
}

.clw-step-desc {
    font-size: 0.85rem;
    color: var(--gray-500, #6b7280);
    margin-bottom: 12px;
}

.clw-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--gray-400, #9ca3af);
}

.clw-plan-card {
    margin-bottom: 12px;
}
.clw-plan-card .el-card__header {
    padding: 10px 16px;
}
.clw-plan-card .el-card__body {
    padding: 12px 16px;
}

.clw-plan-row {
    display: flex;
    gap: 24px;
    font-size: 0.9rem;
}

.clw-params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.clw-param-item label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
    margin-bottom: 2px;
}

.clw-toolset-card {
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
}
.clw-toolset-header {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.clw-toolset-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.clw-toolset-fields .clw-param-item {
    flex: 1;
    min-width: 100px;
}

/* ── Tool Loading Area (Step 3) ── */

.clw-tool-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.clw-tool-summary-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 6px;
    background: var(--gray-50, #f9fafb);
    font-size: 0.8rem;
    transition: all 0.2s;
}

.clw-tool-summary-item.clw-tool-loaded {
    border-color: var(--success, #16a34a);
    background: #f0fdf4;
}

.clw-tool-summary-id {
    font-weight: 700;
    color: var(--gray-700, #374151);
    min-width: 28px;
}

.clw-tool-summary-name {
    color: var(--gray-800, #1f2937);
}

.clw-tool-summary-type {
    color: var(--gray-500, #6b7280);
    font-size: 0.75rem;
}

.clw-tool-loaded-badge {
    font-size: 0.7rem;
    color: var(--success, #16a34a);
    font-weight: 600;
    padding: 1px 5px;
    background: #dcfce7;
    border-radius: 3px;
}

.clw-toolpost-container {
    width: 100%;
    height: 300px;
    background: #f0f0f0;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.clw-toolpost-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ── 工序矩阵（分工表 / 日产能表）2026-10-15 ── */
.mx-wrap { display: flex; gap: 14px; align-items: flex-start; }
.mx-side { width: 132px; flex: none; border-right: 1px solid #ebeef5; padding-right: 8px; }
.mx-side-title { font-size: 0.8rem; color: #909399; margin-bottom: 6px; padding-left: 8px; }
.mx-side-item { padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 0.9rem; color: #303133; }
.mx-side-item:hover { background: #f5f7fa; }
.mx-side-item.active { background: #ecf5ff; color: #165dff; font-weight: 600; }
.mx-main { flex: 1; min-width: 0; }
.mx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mx-h1 { font-size: 1.05rem; font-weight: 600; }
.mx-sub { font-size: 0.82rem; color: #606266; }
.mx-sub b { color: #165dff; }
.mx-warn { background: #fdf6ec; border: 1px solid #f5dab1; color: #b88230;
           padding: 6px 10px; border-radius: 4px; font-size: 0.8rem; margin-bottom: 8px; }
.mx-scroll { overflow: auto; max-height: 68vh; border: 1px solid #ebeef5; border-radius: 4px; }
.mx-table { border-collapse: separate; border-spacing: 0; font-size: 0.82rem; white-space: nowrap; }
.mx-table th, .mx-table td { border-right: 1px solid #f0f2f5; border-bottom: 1px solid #f0f2f5;
                             padding: 5px 9px; text-align: center; }
.mx-table thead th { position: sticky; top: 0; z-index: 3; background: #fafafa;
                     font-weight: 600; color: #303133; }
.mx-sticky-col { position: sticky; left: 0; z-index: 2; background: #fff; font-weight: 600;
                 border-right: 1px solid #ebeef5 !important; }
.mx-corner { z-index: 4; background: #fafafa; }
.mx-rowhead { background: #fafafa; color: #165dff; }
.mx-filled { color: #303133; }
.mx-empty { color: #d0d3d9; }
.mx-table tbody tr:hover td { background: #f5f7fa; }
.mx-table tbody tr:hover .mx-sticky-col { background: #f5f7fa; }
.mx-none { padding: 28px; text-align: center; color: #909399; }

/* ── 工序矩阵可编辑化（matrix-edit-and-add） ── */
.mx-side-add { margin-top: 8px; padding: 6px 10px; border: 1px dashed #b3c6e6; border-radius: 4px;
    color: #165dff; font-size: 0.85rem; cursor: pointer; text-align: center; }
.mx-side-add:hover { background: #ecf5ff; border-color: #165dff; }
.mx-table td { cursor: text; }
.mx-table tfoot td { cursor: default; }
.mx-foot { cursor: pointer !important; color: #165dff; font-weight: 600; background: #fafafa; }
.mx-foot:hover { background: #ecf5ff !important; }
.mx-foot-hint { color: #a8abb2; font-size: 0.78rem; padding: 6px 10px; background: #fafafa; }
.mx-editing { outline: 2px solid #165dff; outline-offset: -2px; }
.mx-saving { opacity: 0.5; }
/* 表头「批量填」小按钮：尽量不占列宽 */
.mx-bulk-btn { margin-left: 4px; padding: 1px 4px; border: 1px solid #c6e2ff; border-radius: 3px;
    background: #ecf5ff; color: #165dff; font-size: 0.68rem; line-height: 1.4; cursor: pointer; }
.mx-bulk-btn:hover { background: #d9ecff; }
/* 额外列头的移除 ×（只隐藏列，不删数据） */
.mx-del-btn { margin-left: 3px; padding: 0 3px; border: none; border-radius: 3px;
    background: transparent; color: #c0c4cc; font-size: 0.9rem; line-height: 1; cursor: pointer; }
.mx-del-btn:hover { background: #fef0f0; color: #f56c6c; }
.mx-dn-note { color: #909399; }
.mx-od-tag { margin-left: 3px; color: #a8abb2; font-weight: 400; font-size: 0.75rem; }
.mx-proc-head.mx-need { background: #fef0f0; color: #d93026; }
.mx-proc-head.mx-need span { font-weight: 700; }
.mx-need-tag { margin-left: 3px; padding: 0 3px; border-radius: 2px;
    background: #fde2e2; color: #d93026; font-size: 0.68rem; font-style: normal; }
.mx-bulk-info { margin-bottom: 12px; font-size: 0.9rem; color: #303133; }
.mx-bulk-info b { color: #165dff; }
.mx-bulk-field { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mx-bulk-field > span { flex: none; color: #606266; font-size: 0.85rem; }
.mx-bulk-tip { margin-top: 4px; color: #909399; font-size: 0.78rem; }
.mx-input { width: 100%; min-width: 64px; box-sizing: border-box; border: none; outline: none;
    font: inherit; color: #303133; background: transparent; padding: 0; }
.mx-diff { border-collapse: collapse; width: 100%; font-size: 0.82rem; margin-top: 6px; }
.mx-diff th, .mx-diff td { border: 1px solid #ebeef5; padding: 3px 6px; text-align: left;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.mx-diff th { background: #fafafa; }

/* 长文本列不折行（规格/窗口等），保持一行更好读 */
.nowrap-cell .cell { white-space: nowrap; }

/* 缺产能的格子：红框（ETA 卡在这里，生产部填上就自动生效） */
.mx-missing { box-shadow: inset 0 0 0 2px #f56c6c !important; background: #fef0f0 !important; }
.mx-missing:hover { background: #fde2e2 !important; }