/* ==========================================================================
   1. 基础与布局 (Base & Layout)
   ========================================================================== */

/* 组件根容器 */
.kingdee_mps_orderfulfillview_front-widget {
    font-family: "Inter", -apple-system, sans-serif;
    background-color: #ffffff;
    padding: 9px;
    box-sizing: border-box;
}

/* 主布局容器，采用 Flexbox 实现稳固的左右两栏 */
.main-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* 确保左右两栏从顶部对齐 */
    margin: 0 20px;
    width: calc(100% - 40px);
}

/* 
 * 左侧流程图外层容器 (结构: B)
 * - 负责占据 67% 的固定宽度。
 * - 作为 Flex 容器，负责将其子元素（.table-wrapper）水平居中和垂直置顶。
*/
.process-container {
    flex: 0 0 67%; 
    display: flex; 
    justify-content: center;   /* 水平居中 */
    align-items: flex-start;   /* 确保内容垂直顶部对齐 */
    background-color: #fff;
    border-radius: 12px;
    padding: 7px; 
    min-width: 0;              /* 关键属性：允许容器在内容溢出时自身收缩 */
}

/* ==========================================================================
   2. 表格与时间轴 (Table & Timeline)
   ========================================================================== */

/* 
 * 表格滚动容器 (结构: C)
 * - 负责在内容（table）超出时提供水平滚动条。
 * - 其宽度由内部的 table 决定，从而允许被父容器居中。
*/
.table-wrapper {
    overflow-x: auto;
    /* position: relative;        /* 启用相对定位，用于微调 */ 
    /* left: 30px;                /* 从其居中位置向右偏移30px（可按需调整） */
}

/* 基础表格样式 */
table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    min-width: 700px;         
}

th, td {
    text-align: center;
    padding: 10px;
    vertical-align: middle;
}

/* 表格第一列：“批次号”列 */
th:first-child, td:first-child { 
    width: 80px; 
    text-align: left; 
}


/* ==========================================================================
   3. 时间轴表头 (Timeline Header - Thead)
   ========================================================================== */

thead th {
    background-color: #f7f9fa;
    border-bottom: 2px solid #e9ecef;
    vertical-align: top;
    padding: 20px 10px;
}

/* 表头中的步骤单元格 */
th.step-header {
    position: relative;
    overflow: visible; /* 允许伪元素超出单元格边界 */
}

/* 表头中的步骤连接线 (通过伪元素实现) */
th.step-header:not(:last-of-type)::after {
    content: '';
    position: absolute;
    top: 30px;
    left: 50%;
    width: 100%;
    height: 3px;
    background-color: #e0e0e0; /* 默认灰色 */
    transform: translateY(-50%);
    z-index: 1;
}

/* 已完成状态的连接线 */
th.step-header.status-completed:not(:last-of-type)::after {
    background-color: #28a745;
}

/* 表头中的主状态图标 */
.master-icon-wrapper {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; /* 确保图标在线条之上 */
    margin: 0 auto 10px auto;
    background-color: #cccccc;
    box-shadow: 0 0 0 4px #f7f9fa; /* 用阴影创建描边效果，使其与背景分离 */
}
th.step-header.status-completed .master-icon-wrapper {
	background-color: #28a745; 
}
th.step-header.status-partial-hold .master-icon-wrapper {
    background: linear-gradient(to right, red 50%, #cccccc 50%);
}
th.step-header.status-in-progress .master-icon-wrapper { 
	background: linear-gradient(to right, #007bff 50%, #cccccc 50%); 
}
th.step-header.status-partial-completed .master-icon-wrapper {
    background: linear-gradient(to right, #28a745 50%, #cccccc 50%);
}
th.step-header.status-partial-hold:not(:last-of-type)::after {
    background-color: #e0e0e0;
}
.master-icon-wrapper svg { vertical-align: top;  }

/* 表头步骤标签 */
.master-label {
    font-size: 14px;
    color: #5a6b82;
    white-space: nowrap;
}
/* ==========================================================================
   4. 时间轴主体 (Timeline Body - Tbody)
   ========================================================================== */

tbody tr:hover { background-color: #f7f9fc; }
tbody td { font-size: 14px; color: #333; }

/* 表体中的步骤单元格 */
.step-cell {
    position: relative;
    overflow: visible;
    padding-top: 31px; /* 微调以保证对齐 */
}
/* 用于包裹日期和图标，便于定位 */
.step-content-wrapper {
    position: relative;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 步骤日期 */
.step-date {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #888;
    white-space: nowrap;
}

/* 表体中的步骤连接线 */
.step-cell::before {
    content: "";
    position: absolute;
    top: 65%;
    transform: translateY(-50%);
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}

/* 已完成状态的连接线 */
.step-cell.line-completed::before { background-color: #28a745; }

/* 隐藏第一行第一个实际节点的连接线 (它是第2个td) */
td:nth-child(2)::before { display: none; }

/* 隐藏非第一行、用于占位的空节点的连接线。第4个td是它们的起始点。*/
/* tr:not(:first-child) > td:nth-child(4)::before { display: none; } */

/* 用于占位的空单元格样式 */
td.step-cell.empty { border: none !important; }
td.empty::before { display: none; }


/* 表体中的步骤状态点 */
.step-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
    border: 2px solid;
}
.status-completed .step-icon { background-color: #28a745; border-color: #28a745; }
.status-pending .step-icon { background-color: #cccccc; border-color: #cccccc;}
.status-on-hold .step-icon { background-color: red; border-color: red; }
.status-in-progress .step-icon { background-color: #007bff; border-color: #007bff; }

/* 最终状态的卡车图标容器 */
.custom-svg-icon-wrapper {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    background-color: #fff; /* 背景色用于遮挡下方的连接线 */
    padding: 0 4px;
}
.custom-svg-icon-wrapper svg { width: 28px; height: 28px; }


/* ==========================================================================
   5. 右侧详情卡片 (Right Details Card)
   ========================================================================== */

/* 
 * 右侧详情卡片外层容器 (结构: B)
 * - 负责占据 33% 宽度，并将其子元素（.details-card）水平居中。
*/
.details-container {
    flex: 0 0 33%;
    display: flex;
    justify-content: center;
    padding: 7px; 
}
/* 
 * 右侧卡片本身 (结构: C)
 * - 负责自身的视觉样式（背景、边框、阴影等）和内容布局。
 * - 高度由内容自适应。
*/
.details-card {
    width: 100%; 
    max-width: 400px;
    height: fit-content; 
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}
.card-title {
    padding: 12px 15px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fafafa;
}
.details-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.details-card li {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 13px 12px;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
}
.details-card li:last-child {
    border-bottom: none;
}
/* 卡片内容列的默认样式 */
.details-card li.item-status-completed {
    color: #8c8c8c; /* 灰色 */
}
.item-status-on-hold .status {
    color: red;
    font-weight: 500;
}
/* 仅设置对齐，不再控制颜色 */
.batch {
    text-align: left;
}
.node {
    text-align: center;
}
.status {
    text-align: right;
}

/* status 为灰色 */
.item-status-completed .status {
    color: #8c8c8c;
}
/* 当 li 有 .item-status-on-hold 类时，其下的 .status 为红色并加粗 */
.item-status-on-hold .status {
    color: red;
    font-weight: 500;
}