/* =========================================================================
 * tooling-display.css —— 工装车间生产执行看板（源自静态原型 电子看板.html，
 * 深色 grid 三栏布局；放入 1920x1080 artboard 内经 fitScale 等比缩放）
 * ========================================================================= */
*{margin:0;padding:0;box-sizing:border-box}
@font-face{font-family:'tech';src:local('DIN Alternate'),local('Roboto Mono')}
:root{
  --bg:#0a0e1a;--bg2:#0d1320;--card:#101a2e;--card2:#0f1830;
  --border:#1a3050;--border2:#234070;
  --cyan:#00d4ff;--blue:#1890ff;--green:#00d26a;--red:#ff4d4f;--yellow:#faad14;--purple:#722ed1;
  --text:#c8d3e6;--text2:#8a9bb8;--text3:#5a6a88;
}
html,body{height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'Microsoft YaHei','tech',sans-serif;overflow:hidden;
}
/* layout 内嵌时的整页覆盖 */
body, body.bg-light { background: #0a0e1a !important; }
.main-content { padding: 0 !important; margin: 0 !important; }
.w2p_flash, .breadcrumb-bar { display: none; }

/* ===== 1920x1080 画板（fitScale 等比缩放） ===== */
.stage{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden}
.artboard{position:fixed;top:50%;left:50%;width:1920px;height:1080px;transform-origin:center center;overflow:hidden}

/* ===== 悬浮按钮（全屏 / 数据管理，与其它大屏同机制） ===== */
.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(13, 20, 41, 0.85); color: var(--cyan);
  border: 1px solid rgba(120, 160, 255, 0.25); 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: var(--cyan); box-shadow: 0 0 12px rgba(0, 212, 255, 0.3); }
.fullscreen-btn:hover, .manage-btn:hover { color: var(--cyan); }

/* ===== App 骨架 ===== */
.app{display:flex;flex-direction:column;height:100%}

/* ===== Header ===== */
.header{height:64px;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#0d1830 0%,#0a0e1a 100%);
  border-bottom:1px solid var(--border);padding:0 24px;position:relative;flex-shrink:0}
.header::after{content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.5}
.header-left{display:flex;align-items:center;gap:12px}
.header-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--cyan),var(--blue));
  border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#0a0e1a}
.header-title{font-size:24px;font-weight:bold;
  background:linear-gradient(90deg,#00d4ff,#1890ff,#722ed1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px}
.header-sub{font-size:12px;color:var(--text3);margin-top:2px}
.header-right{display:flex;align-items:center;gap:24px;font-size:14px}
.header-item{display:flex;align-items:center;gap:8px}
.shift-badge{background:rgba(0,210,106,.15);border:1px solid rgba(0,210,106,.4);
  border-radius:4px;padding:4px 12px;color:var(--green);font-size:12px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px var(--green);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.5}}
.clock{font-family:'Roboto Mono',monospace;font-size:18px;color:var(--cyan);min-width:200px;text-align:right}

/* ===== 事件滚动通栏 ===== */
.events-bar{height:40px;flex-shrink:0;display:flex;align-items:center;overflow:hidden;
  background:rgba(13,24,48,.55);border-top:1px solid rgba(35,64,112,.35);
  border-bottom:1px solid rgba(35,64,112,.35);padding:0 12px;position:relative}
.events-bar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--yellow),var(--red))}
.events-track{display:flex;gap:34px;white-space:nowrap;padding-left:24px;
  animation:marquee 90s linear infinite}
.events-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ev{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text2)}
.ev::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ev.success::before{background:var(--green);box-shadow:0 0 6px var(--green)}
.ev.warning::before{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.ev.danger::before{background:var(--red);box-shadow:0 0 6px var(--red)}

/* ===== Main Grid（单行铺满：三列等高，底边对齐的前提） ===== */
.main{flex:1;display:grid;grid-template-columns:1fr 1.8fr 1fr;grid-template-rows:1fr;
  gap:10px;padding:10px;overflow:hidden}

/* ===== Card ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;position:relative}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:8px 0 0 8px}
.card.gauge::before{background:linear-gradient(180deg,var(--cyan),var(--blue))}
.chart::before{background:linear-gradient(180deg,var(--green),var(--cyan))}
.events::before{background:linear-gradient(180deg,var(--yellow),var(--red))}
.quality::before{background:linear-gradient(180deg,var(--purple),var(--blue))}
.kpi::before{background:linear-gradient(180deg,var(--green),var(--yellow))}
.card-header{padding:8px 14px 6px 14px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(35,64,112,.3)}
.card-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:1px}
.card-icon{font-size:16px}
/* 卡体纵向 flex：使卡内图表 div 的 flex:1 生效（弹性铺满/吃满剩余高度） */
.card-body{flex:1;display:flex;flex-direction:column;min-height:0;padding:8px;overflow:hidden;position:relative}

/* ===== Left Column ===== */
.col-left{display:flex;flex-direction:column;gap:10px;overflow:hidden}
.gauge-chart{height:170px}
.month-chart{flex:1;min-height:0}
.project-chart{height:200px}
/* 中部卡弹性吸收剩余高度（月度产量趋势），底部 TOP10 卡贴列底（与班组/明细卡等高） */
.col-left > .card:nth-child(2){flex:1;min-height:0}

/* ===== Middle Column ===== */
.col-mid{display:flex;flex-direction:column;gap:10px;overflow:hidden}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex-shrink:0}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;position:relative;overflow:hidden}
.kpi-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:8px 0 0 8px}
.kpi-card.k1::before{background:var(--green)}
.kpi-card.k2::before{background:var(--blue)}
.kpi-card.k3::before{background:var(--yellow)}
.kpi-card.k4::before{background:var(--red)}
.kpi-label{font-size:11px;color:var(--text2);margin-bottom:2px}
.kpi-value{font-size:30px;font-weight:bold;font-family:'Roboto Mono',monospace;line-height:1.2}
.kpi-card.k1 .kpi-value{color:var(--green)}
.kpi-card.k2 .kpi-value{color:var(--cyan)}
.kpi-card.k3 .kpi-value{color:var(--yellow)}
.kpi-card.k4 .kpi-value{color:var(--red)}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:2px}

/* 中列图表：状态分布卡铺满中列（高度固定），下方明细表弹性吸收剩余空间 */
.mid-charts{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;gap:10px;
  flex:none;width:100%;height:200px}
.mid-chart-card{background:var(--card);border:1px solid var(--border);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;position:relative}
.mid-chart-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:8px 0 0 8px;background:var(--cyan)}
.mid-chart-header{padding:7px 14px 5px 14px;border-bottom:1px solid rgba(35,64,112,.3)}
.mid-chart-title{font-size:13px;font-weight:600;color:var(--text);letter-spacing:1px}
.mid-chart-body{flex:1;padding:4px;min-height:0}

/* ===== Current Month Table（固定表头 + 行区自动滚动；弹性放大贴列底） ===== */
.table-card{flex:1;height:auto;min-height:0;display:flex;flex-direction:column}
.tbl-head{flex:none;overflow:hidden;border-bottom:1px solid rgba(0,212,255,.18)}
.tbl-body{flex:1;min-height:0;overflow:hidden;position:relative}
.tbl-body:hover .tbl-scroll{animation-play-state:paused}
.tbl-scroll{animation:tblUp 45s linear infinite;will-change:transform}
@keyframes tblUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.tbl-head .month-table,.tbl-body .month-table{width:100%;min-width:0;table-layout:fixed;
  border-collapse:separate;border-spacing:0;font-size:10px}
.tbl-head .month-table th{background:linear-gradient(180deg,#0f1e3a,#0a1528);padding:7px 6px;text-align:center;
  font-weight:700;color:var(--cyan);font-size:9px;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;position:relative;text-shadow:0 0 6px rgba(0,212,255,.3)}
.tbl-head .month-table th::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(0,212,255,.2),transparent)}
.tbl-head .month-table th:last-child::after{display:none}
.tbl-body .month-table td{padding:4px 6px;text-align:center;border-bottom:1px solid rgba(26,48,80,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl-body .month-table tbody tr{background:rgba(15,30,58,.22)}
.tbl-body .month-table tbody tr:hover{background:rgba(0,212,255,.08)!important}
.tbl-body .month-table tbody tr:hover td{color:var(--text)}
.status-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;
  font-size:9px;font-weight:600;letter-spacing:.3px}
.status-badge::before{content:'';width:5px;height:5px;border-radius:50%;display:inline-block}
.status-badge.done{background:rgba(0,210,106,.12);color:var(--green);border:1px solid rgba(0,210,106,.25)}
.status-badge.done::before{background:var(--green);box-shadow:0 0 4px var(--green)}
.status-badge.progress{background:rgba(250,173,20,.12);color:var(--yellow);border:1px solid rgba(250,173,20,.25)}
.status-badge.progress::before{background:var(--yellow);box-shadow:0 0 4px var(--yellow)}
.status-badge.pending{background:rgba(90,106,136,.12);color:var(--text3);border:1px solid rgba(90,106,136,.2)}
.status-badge.pending::before{background:var(--text3)}
.qty-cell{font-family:'Roboto Mono',monospace;color:var(--cyan);font-weight:600;font-size:10px}
.team-cell{font-size:9px;color:var(--text2)}
.month-summary{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text2)}
.month-summary b{color:var(--cyan);font-size:13px;font-family:'Roboto Mono',monospace}
.month-summary .stat-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
  border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(35,64,112,.3)}
.project-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:9px;font-weight:700;
  background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);color:var(--cyan);
  text-shadow:0 0 4px rgba(0,212,255,.3)}
.actual-up{color:var(--green)!important;text-shadow:0 0 4px rgba(0,210,106,.3)}
.actual-down{color:var(--yellow)!important}
.actual-na{color:var(--text3)!important}

/* ===== Right Column ===== */
.col-right{display:flex;flex-direction:column;gap:10px;overflow:hidden}
.mold-chart{height:170px}
.category-chart{height:195px}
.team-chart{flex:1;min-height:0}
/* 中部卡弹性吸收剩余高度（班组工作量），底部班组卡贴列底（与 TOP10/明细卡等高） */
.col-right > .card:nth-child(3){flex:1;min-height:0}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}