/* =========================================================================
 * stamp-display.css —— 冲压·焊接车间生产看板（源自静态原型 1.html，
 * 深色 6 列网格版式；固定 1920x1080 artboard + fitScale 等比缩放，
 * 与其它大屏（技术/工装/安全）一致，适配电视显示）
 * ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft Yahei",sans-serif}
html,body{height:100%}
body{background:#0f1722;color:#fff}
/* layout 内嵌时的整页覆盖 */
body, body.bg-light { background: #0f1722 !important; }
.main-content { padding: 0 !important; margin: 0 !important; }
.w2p_flash, .breadcrumb-bar { display: none; }

/* ===== 固定 1920x1080 画板（fitScale 等比缩放，与安全大屏一致的 translate 居中） ===== */
.stage{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;background:#0f1722}
.artboard{position:fixed;top:50%;left:50%;width:1920px;height:1080px;transform-origin:center center;overflow:hidden;background:#0f1722}

/* ===== 悬浮按钮（全屏 / 数据管理，与其它大屏同机制） ===== */
.fullscreen-btn, .manage-btn {
  position: fixed; top: 16px; z-index: 9999;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 20px; cursor: pointer;
  background: rgba(20, 29, 43, 0.88); color: #36b9ff;
  border: 1px solid rgba(90, 160, 255, 0.3); font-size: 13px;
  letter-spacing: 1px; text-decoration: none;
  transition: opacity 0.25s ease, border-color 0.2s;
  opacity: 0; pointer-events: none;
  backdrop-filter: blur(6px);
}
.fullscreen-btn { left: 50%; transform: translateX(-50%); }
.manage-btn { right: 16px; }
.fullscreen-btn.visible, .manage-btn.visible { opacity: 1; pointer-events: auto; }
.fullscreen-btn:hover, .manage-btn:hover { border-color: #36b9ff; box-shadow: 0 0 12px rgba(54, 185, 255, 0.3); color: #36b9ff; }

/* ===== 页面容器：6 列网格（1920x1080 基准，固定像素）
 * 注意：不使用 bootstrap 的 .container 类名，避免其响应式 max-width 覆盖导致左右留白 ===== */
.stamp-container{width:100%;height:100%;display:grid;
  gap:10px;
  padding:10px 12px;
  grid-template-columns:repeat(6,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden}

/* ===== 顶部标题栏 ===== */
.header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;
  background:#141d2b;border-radius:8px;border:1px solid #223348}
.header-left{display:flex;align-items:center;gap:10px}
.header-icon{width:34px;height:34px;border-radius:6px;
  background:#0f2136;display:flex;align-items:center;justify-content:center;
  font-size:20px}
.header-title{font-size:22px;color:#36b9ff;font-weight:bold}
.header-sub{font-size:12px;color:#99abb8;letter-spacing:1px;margin-top:2px}
.header-right{text-align:right}
.time-text{font-size:17px;color:#fff;font-family:'Roboto Mono',Consolas,monospace}
.tag-prod{display:inline-block;padding:2px 12px;background:#233752;
  border-radius:4px;border:1px solid #36b9ff;color:#36b9ff;margin-left:8px;
  font-size:13px}
.refresh-tip{font-size:12px;color:#8899aa;margin-top:3px}
.run-line{font-size:13px;color:#36d96b;margin-left:10px}

/* ===== 指标卡片（拆分嵌入两条产线栏顶部，各 3 张窄卡） ===== */
.line-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:6px}
.top-card{padding:6px 8px 5px;
  background:#141d2b;border-radius:6px;border:1px solid #223348;
  min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.card-title{font-size:14px;color:#8899aa;display:flex;align-items:center;gap:4px}
.line-kpis .card-title{font-size:11px}
.card-value{font-size:34px;color:#36d9ff;font-weight:bold;margin:6px 0;line-height:1.15;
  font-family:'Roboto Mono',Consolas,monospace;white-space:nowrap}
.line-kpis .card-value{font-size:22px;margin:4px 0}
.progress-bar{width:100%;height:6px;background:#223348;border-radius:3px;overflow:hidden}
.progress-inner{height:100%;background:linear-gradient(90deg,#0094d8,#00b8e6);border-radius:3px;
  transition:width .6s ease}
.card-foot{font-size:12px;color:#8899aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line-kpis .card-foot{font-size:11px}

/* ===== 产线左右两栏（弹性高度铺满剩余空间） ===== */
.lines-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:minmax(0,1fr);gap:12px;min-height:500px}
.line-col,.line-left,.line-right{background:#141d2b;border-radius:8px;border:1px solid #223348;
  padding:10px 12px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
.line-col .chart-box{height:110px;flex:none}
.line-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.line-att{font-size:14px;color:#36d9ff;font-weight:bold;
  letter-spacing:1px;margin-bottom:4px}
.line-title{font-size:16px;color:#36b9ff;font-weight:bold}
.line-status{font-size:12px;color:#8899aa}
.line-status b.ok{color:#36d96b}
.line-status b.fail{color:#ff4d4f}
.line-status b.idle{color:#ffb84d}
/* 设备列表：填满产线容器（产线为主要内容，行数超出自动滚动双份无缝） */
.dev-list{flex:1;height:auto;min-height:300px;overflow:hidden;display:flex;flex-direction:column}
.dev-track{display:flex;flex-direction:column;gap:6px;will-change:transform}
.dev-track.auto{animation:devUp 45s linear infinite}
.dev-list:hover .dev-track.auto{animation-play-state:paused}
@keyframes devUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
/* 设备行：状态点+名称 | 物料(图+编码+名称) | 产量/预计 */
.device-item{display:flex;align-items:center;gap:10px;
  padding:5px 10px;border-radius:6px;
  background:#192434;border:1px solid transparent;min-height:52px}
.device-item.error{border:1px solid #ff4d4f;background:rgba(255,77,79,.08)}
.dev-idx{display:flex;align-items:center;gap:7px;width:190px;flex-shrink:0}
.dev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dev-dot.run{background:#36d96b;box-shadow:0 0 6px #36d96b}
.dev-dot.idle{background:#ffb84d;box-shadow:0 0 6px #ffb84d}
.dev-dot.down{background:#ff4d4f;box-shadow:0 0 6px #ff4d4f}
.device-name{font-size:14px;white-space:nowrap}
.dev-mat{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.mat-img{width:58px;height:58px;border-radius:6px;
  background:#101b2a;border:1px solid #2a3d55;object-fit:cover;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.mat-img .noimg{font-size:11px;color:#5a6d85}
.mat-info{min-width:0}
.mat-code{font-size:12px;color:#36b9ff;white-space:nowrap}
.mat-name{font-size:12px;color:#99abb8;margin-top:2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.device-num{font-size:15px;color:#fff;font-family:'Roboto Mono',Consolas,monospace;
  white-space:nowrap;flex-shrink:0}
.device-num em{font-style:normal;color:#5a6d85}

/* ===== 图表通用容器（产线栏底部环图 + 质量分析栏图表共用） ===== */
.chart-box{flex:1;min-height:0;position:relative;overflow:hidden}
/* 容器铺满固定小高度；图表高度由此决定，不撑破产线区 */
#ringChartStamp,#ringChartWeld{width:100%;height:110px;min-height:0}

/* ===== 质量分析栏（1/3 宽：生产不良率 20% / 废品率 20% / 错漏检 20% / 缺陷件 40%） ===== */
.quality-col{background:#141d2b;border-radius:8px;border:1px solid #223348;
  padding:8px 10px;
  display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
.q-card{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:#192434;border-radius:6px;border:1px solid #223348;padding:6px 8px}
/* 缺陷件段占 40%（三图各 1 份 20%，缺陷件 2 份 40%）；图片放大显示 */
.q-card.q-defect{flex:2}
.q-defect .defect-img{height:170px;max-width:240px}
.q-card .chart-box{flex:1;min-height:0}
#defectChart,#missChart{width:100%;height:100%;min-height:0}
/* 缺陷件图片横向滚动（双份克隆无缝循环） */
.defect-track{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden;
  animation:defectX 40s linear infinite;min-height:0}
.quality-col:hover .defect-track{animation-play-state:paused}
@keyframes defectX{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.defect-img{height:64px;max-width:96px;object-fit:cover;border-radius:6px;
  border:1px solid #2a3d55;cursor:zoom-in;flex-shrink:0}
.defect-empty{color:#5a6d85;font-size:12px;display:flex;align-items:center;
  justify-content:center;height:100%}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:#2a3d55;border-radius:2px}