body{margin:0;font-family:"Microsoft YaHei",Arial;background:#f3f4f6}
.layout{display:flex;min-height:100vh}
aside{width:220px;background:#1f2937;color:white;padding:20px}
aside h2{margin-bottom:30px}
aside div{padding:15px 5px;border-bottom:1px solid #374151}
main{flex:1}
header{background:white;padding:22px;font-size:26px;font-weight:bold}
.cards{display:flex;gap:20px;padding:20px}
.card{background:white;padding:25px;width:180px;border-radius:10px;font-size:18px}
.card b{font-size:35px}
.panel{background:white;margin:20px;padding:20px}
table{width:100%;border-collapse:collapse}
th,td{padding:12px;border:1px solid #ddd;text-align:center}

/* 设备编辑弹窗 */
#machineForm{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:white;
    padding:30px;
    width:360px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    z-index:9999;
}

#machineForm input{
    width:220px;
    padding:6px;
    margin:5px;
}

#machineForm button{
    margin-top:15px;
    padding:6px 20px;
    cursor:pointer;
}


/* 设备弹窗遮罩 */
#machineMask{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    z-index:9998;
}



/* =====================================
   MES 工业实时看板样式
===================================== */


body{

background:#061526;
color:#e5f3ff;

}


/* 主区域 */

main{

background:
linear-gradient(
135deg,
#061526,
#0b2038
);

}



/* 顶部 */

header{

background:#071d33;

color:#ffffff;

border-bottom:

1px solid #164b78;

}


/* 左侧菜单 */

aside{

background:

linear-gradient(
180deg,
#071522,
#10263d
);

border-right:

1px solid #164b78;

}


aside div{

color:#d8ecff;

border-bottom:

1px solid rgba(255,255,255,.08);

}


aside div:hover{

background:#123b61;

}


/* 看板容器 */

#machineDashboard{

padding:20px;

}



/* 分组标题 */

.machine-group-title{

font-size:22px;

font-weight:bold;

color:#4db8ff;

margin-top:25px;

padding:15px 0;

border-bottom:

1px solid #145080;

}



/* 机器网格 */

.machine-grid{

display:grid;

grid-template-columns:repeat(10,1fr);

gap:12px;

margin-top:15px;

}



/* 机器卡片 */

.machine-card{

height:170px;

background:

linear-gradient(
145deg,
#102b46,
#081b30
);


border:

1px solid #24577d;


border-radius:10px;


padding:12px;


box-shadow:

0 0 15px rgba(0,120,255,.15);


transition:.3s;


}


.machine-card:hover{

transform:translateY(-4px);

border-color:#4db8ff;

}



/* 机器名称 */

.machine-card h3{

margin:0 0 10px;

font-size:18px;

color:white;

}



/* 状态 */

.machine-running{

border-color:#00ff88;

box-shadow:

0 0 18px rgba(0,255,136,.35);

}



.machine-stop{

border-color:#667788;

}



/* 状态文字 */

.status-running{

color:#00ff88;

font-weight:bold;

}


.status-stop{

color:#b8c4d0;

font-weight:bold;

}



/* 卡片信息 */

.machine-card div{

font-size:14px;

line-height:24px;

color:#c8d8e8;

}



/* 待添加设备 */

.empty-machine{

height:170px;

border:

1px dashed #31516d;

display:flex;

align-items:center;

justify-content:center;

color:#58758e;

font-size:16px;

border-radius:10px;

}





/* 实时看板顶部统计 */

.dashboard-summary{

display:grid;

grid-template-columns:repeat(4,180px);

gap:20px;

padding:20px;

}


.summary-card{

background:
linear-gradient(
145deg,
#12304c,
#071827
);


border:

1px solid #24618d;


border-radius:12px;


padding:18px;


text-align:center;


box-shadow:

0 0 15px rgba(0,150,255,.2);

}


.summary-title{

font-size:14px;

color:#9fc7e8;

}


.summary-number{

font-size:36px;

font-weight:bold;

color:#ffffff;

margin-top:10px;

}


.summary-running{

color:#00ff88;

}


.summary-stop{

color:#bfc8d2;

}


.summary-error{

color:#ff5555;

}




.dashboard-top{

display:flex;

gap:25px;

padding:10px 20px;

font-size:18px;

font-weight:bold;

color:#4db8ff;

border-bottom:1px solid #164b78;

}


.summary-line{

padding:8px 20px;

color:#c8d8e8;

font-size:15px;

}




/* =====================================
   MES顶部生产监控科技风
===================================== */


#dashboardSummary{

margin:15px 20px;

padding:15px;

background:

linear-gradient(
135deg,
#071827,
#0d2942
);


border:

1px solid #14558a;


border-radius:10px;


box-shadow:

0 0 20px rgba(0,150,255,.15);


}



/* 顶部四项 */

.dashboard-top{


display:grid;


grid-template-columns:repeat(4,160px);


gap:15px;


margin-bottom:12px;


}



.dashboard-top div{


background:

linear-gradient(
145deg,
#10304d,
#081a2d
);



border:

1px solid #21618f;



border-radius:8px;



padding:10px;



text-align:center;



color:#57c7ff;



font-size:16px;



}



/* 数字强调 */

.dashboard-top div::first-line{


font-weight:bold;


}



/* 类型统计 */

.summary-line{


background:#081d32;


border-left:

3px solid #009cff;



padding:8px 12px;



margin-top:6px;



border-radius:5px;



color:#cde8ff;



font-size:14px;



}





#realtimeDashboard h2{


color:#4dc8ff;


font-size:28px;


letter-spacing:2px;


text-shadow:

0 0 12px rgba(0,180,255,.6);



}





/* ==========================
   实时生产看板 工业风
========================== */


#realtimeDashboard{
    background:#071b2f;
    min-height:100%;
    color:#e5f3ff;
}


/* 顶部统计 */
.dashboard-top{

    display:flex;
    gap:15px;
    padding:20px 0;

}


.dashboard-top>div{

    background:#102d4a;

    border:1px solid #164d78;

    border-radius:8px;

    padding:12px 25px;

    min-width:120px;

    color:#9ed8ff;

    font-size:16px;

    box-shadow:
    0 0 12px rgba(0,160,255,0.15);

}


.dashboard-top>div::first-line{

    color:#ffffff;

}


.summary-line{

    background:#0b243d;

    border-left:3px solid #0099ff;

    padding:10px 15px;

    margin:8px 0;

    color:#cce9ff;

}



/* 设备分类标题 */

.machine-group-title{

    margin-top:28px;

    padding:12px 15px;

    font-size:22px;

    font-weight:bold;

    color:#19b5ff;

    border-bottom:1px solid #155078;

}



/* 机器卡片排列 */

.machine-grid{

    display:grid;

    grid-template-columns:
    repeat(10,110px);

    gap:12px;

    padding:15px;

}



/* 机器卡片 */

.machine-card{

    height:150px;

    background:#0c263f;

    border-radius:8px;

    padding:12px;

    border:1px solid #315b7d;

    transition:.3s;

}



.machine-card h3{

    margin:0 0 8px;

    font-size:17px;

    color:white;

}


.machine-running{

    border-color:#00ff88;

    box-shadow:
    0 0 15px rgba(0,255,120,.35);

}


.machine-stop{

    border-color:#41576b;

}



.status-running{

    color:#00ff88;

    font-weight:bold;

}


.status-stop{

    color:#b0bec5;

}





.machine-type{

    color:#19b5ff;

    font-size:13px;

    margin-bottom:8px;

    padding:3px 0;

}


.machine-card div{

    line-height:22px;

    font-size:13px;

}




/* ===============================
   MES实时生产看板升级
================================*/


#realtimeDashboard{

    background:#061522;

    padding:20px;

}


/* 顶部统计区域 */

.dashboard-top{

    display:flex;

    gap:12px;

    margin-bottom:15px;

}


.dashboard-top>div{

    flex:1;

    background:
    linear-gradient(145deg,#12304a,#081b2d);


    border:1px solid #14547d;

    border-radius:10px;

    padding:15px;

    text-align:center;

    color:#8ed8ff;

    font-size:16px;


    box-shadow:
    inset 0 0 20px rgba(0,180,255,.08),
    0 0 12px rgba(0,120,255,.2);

}


.dashboard-top>div{

    letter-spacing:1px;

}



/* 类型统计 */

.summary-line{

    background:#0b2238;

    margin:8px 0;

    padding:12px 18px;

    border-left:4px solid #00aaff;

    border-radius:5px;

    color:#c8eaff;

}



/* 分组标题 */

.machine-group-title{

    margin-top:25px;

    padding:12px;

    font-size:20px;

    font-weight:bold;

    color:#00c8ff;

    border-bottom:1px solid #16466b;

}



/* 机器排列 */

.machine-grid{

    display:grid;

    grid-template-columns:repeat(10,110px);

    gap:12px;

    margin-top:15px;

}



/* 机器卡片 */

.machine-card{

    background:#0b2136;

    border-radius:8px;

    min-height:150px;

    padding:12px;

    border:1px solid #294863;

    color:#d8edff;

}



/* 设备编号 */

.machine-card h3{

    color:#ffffff;

    font-size:17px;

    margin:0 0 10px;

}



/* 类型 */

.machine-type{

    color:#36c8ff;

    font-size:12px;

}



/* 生产状态 */

.status-running{

    margin:10px 0;

    color:#00ff88;

    font-weight:bold;

}


.status-stop{

    margin:10px 0;

    color:#9aa8b5;

}



/* 生产设备发光 */

.machine-running{

    border:1px solid #00ff88;

    box-shadow:

    0 0 12px rgba(0,255,130,.35);

}



/* 停机 */

.machine-stop{

    opacity:.9;

}



/* 空设备 */

.empty-machine{

    height:120px;

    border:1px dashed #34536b;

    border-radius:8px;

    color:#587286;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}




/* 机器类型颜色 */

.machine-group-title{

    position:relative;

}


.machine-group-title:nth-of-type(1){

    border-left:5px solid #0099ff;

}


.machine-group-title:nth-of-type(2){

    border-left:5px solid #00ff88;

}


.machine-group-title:nth-of-type(3){

    border-left:5px solid #b266ff;

}



/* 标题增强 */

.machine-group-title span{

    font-size:14px;

    color:#9cc7e8;

}




.machine-card h3{

    line-height:24px;

}


.machine-card h3:first-line{

    color:#00c8ff;

    font-size:20px;

}




.machine-grid{

    grid-template-columns:
    repeat(10,minmax(100px,1fr));

}




.product-spec{

    color:#ffffff;

    font-weight:bold;

    margin:8px 0;

    padding:5px;

    background:#102f49;

    border-radius:4px;

}




.status-running{

    color:#00ff88;

    text-shadow:
    0 0 8px #00ff88;

}


.status-stop{

    color:#8899aa;

}




/* ==============================
   实时看板机器卡片优化
================================*/


.machine-card{

    width:110px;

    min-height:165px;

    height:auto;

    padding:10px;

    box-sizing:border-box;

    overflow:hidden;

}


/* 设备编号 */

.machine-card h3{

    font-size:16px;

    line-height:20px;

    margin:0 0 8px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* 类型 */

.machine-type{

    font-size:12px;

    line-height:18px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* 状态 */

.status-running,
.status-stop{

    font-size:13px;

    line-height:20px;

    margin:6px 0;

    white-space:nowrap;

}



/* 产品、业务、员工 */

.machine-card div:not(.machine-type):not(.status-running):not(.status-stop){

    font-size:12px;

    line-height:18px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* 生产中的设备稍微增强 */

.machine-running{

    box-shadow:

    0 0 10px rgba(0,255,130,.35);

}



/* 网格间距 */

.machine-grid{

    gap:10px;

}




/* ===============================
   三种设备类型颜色
================================*/


/* 梭机 */

.machine-group-title:nth-of-type(1){

    border-left:5px solid #00aaff;

}


/* 大喷织布机 */

.machine-group-title:nth-of-type(2){

    border-left:5px solid #00ff88;

}


/* 小喷织布机 */

.machine-group-title:nth-of-type(3){

    border-left:5px solid #b56cff;

}



/* 生产状态设备颜色 */

.machine-running{

    border-color:#00ff88;

}



/* 不同类型设备卡片 */

.machine-type{

    color:#5edcff;

}





.machine-info{

    font-size:12px;

    line-height:20px;

    color:#d7efff;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}




/* ===============================
   MES顶部统计卡
================================ */


.dashboard-top{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    margin-bottom:20px;

}


.stat-box{

    background:
    linear-gradient(
    145deg,
    #12304a,
    #071827
    );


    border:1px solid #14547d;

    border-radius:12px;

    padding:14px;

    text-align:center;

    box-shadow:
    0 0 15px rgba(0,160,255,.15);

}



.stat-title{

    display:block;

    color:#8bbbd8;

    font-size:13px;

    margin-bottom:8px;

}



.stat-box strong{

    font-size:30px;

    color:#00c8ff;

    font-family:Arial;

}



.stat-box span:last-child{

    color:#b9dff5;

    margin-left:5px;

}



.running-num{

    color:#00ff88 !important;

    text-shadow:

    0 0 10px rgba(0,255,136,.6);

}





/* 实时更新时间 */

#dashboardTime{

    float:right;

    font-size:13px;

    font-weight:normal;

    color:#8bbbd8;

    margin-top:10px;

}





/* =========================
   规格编辑弹窗
========================= */


.spec-mask{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.55);

z-index:999;


}



.spec-mask > h3,
.spec-mask > input,
.spec-mask > button,
.spec-mask > br{

position:relative;

}



.spec-mask{

padding-top:120px;

text-align:center;

}



.spec-mask h3{

background:white;

color:#222;

width:420px;

margin:auto;

padding:20px 0 10px;

}



.spec-mask input{

width:260px;

height:32px;

margin:8px;

}



.spec-mask button{

margin:15px 8px;

padding:8px 20px;

}





/* ================================
   规格编辑弹窗优化 V2
================================ */




/* ================================
   规格编辑弹窗 FINAL
================================ */




/* ================================
   MES规格编辑弹窗 FINAL
================================ */


#editSpecMask{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.55);

z-index:99999;

align-items:center;

justify-content:center;

}


#editSpecMask.show{

display:flex;

}



#editSpecMask .spec-dialog{

width:420px;

background:#fffaf0;

padding:30px;

border-radius:12px;

box-shadow:0 8px 30px rgba(0,0,0,.35);

}



#editSpecMask .spec-dialog h3{

margin:0 0 25px;

text-align:center;

font-size:22px;

color:#222;

}



#editSpecMask .spec-form-row{

display:flex;

align-items:center;

margin:15px 0;

}



#editSpecMask .spec-form-row label{

width:70px;

font-size:15px;

}



#editSpecMask .spec-form-row input{

flex:1;

height:36px;

border:1px solid #ddd;

border-radius:6px;

padding-left:10px;

}



#editSpecMask .spec-dialog-buttons{

text-align:center;

margin-top:25px;

}


#editSpecMask .spec-dialog-buttons button{

padding:8px 30px;

margin:0 10px;

border-radius:6px;

background:white;

border:1px solid #ddd;

}




/* 编辑规格弹窗文字颜色优化 */

#editSpecMask .spec-form-row label{

color:#222 !important;

}


#editSpecMask .spec-dialog h3{

color:#111 !important;

}