/* === 注塑车间设备看板样式 (1280x720, no zoom) === */
/* 电视机浏览器优化：减少合成层、简化渐变、降低重绘 */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app {
  overflow: hidden; height: 100%; margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Logo */
.logo { background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 4px; }
.logo-1 { width: 50px; height: 27px; background-image: url('../assets/logo1.png'); }
.logo-2 { width: 133px; height: 27px; background-image: url('../assets/logo2.png'); }

/* 设备卡片状态色 */
.eq-running { background: rgba(30,64,175,0.6); border-color: rgba(96,165,250,0.4); color: white; }
.eq-fault { background: rgba(239,68,68,0.7); border-color: rgba(239,68,68,0.8); color: white; }
.eq-maintain { background: rgba(245,158,11,0.7); border-color: rgba(245,158,11,0.8); color: white; }
.eq-idle { background: rgba(107,114,128,0.5); border-color: rgba(107,114,128,0.3); color: rgba(255,255,255,0.8); }

/* 保养紧急度 */
.twoWeekClass-urgent { background: rgba(239,68,68,0.7) !important; border-left: 2px solid #ef4444 !important; }
.twoWeekClass-soon { background: rgba(245,158,11,0.5) !important; border-left: 2px solid #f59e0b !important; }
.twoWeekClass-planned { background: rgba(30,64,175,0.4) !important; border-left: 2px solid #3b82f6 !important; }

/* 布局 */
.board-root {
  display: flex; flex-direction: column;
  background: rgb(15, 25, 45); /* 简化：纯色背景替代三段渐变，减少 GPU 绘制 */
  height: 100%; overflow: hidden; color: #fff;
  contain: layout style;
}

/* Header */
.board-header {
  display: flex; align-items: center; justify-content: space-between;
  background: rgb(30,64,175); /* 简化：纯色替代渐变 */
  padding: 5px 16px; border-bottom: 1px solid rgba(147,197,253,0.3);
  flex-shrink: 0;
}
.board-header-logos { display: flex; gap: 4px; align-items: center; }
.board-title { font-size: 14px; font-weight: 600; color: rgb(224,242,254); letter-spacing: 1px; }
.board-clock { font-size: 12px; color: rgb(224,242,254); background: rgba(255,255,255,0.2); padding: 3px 7px; border-radius: 3px; }

/* KPI Row */
.kpi-row { display: flex; gap: 5px; padding: 7px 20px; flex-shrink: 0; }
.kpi-card {
  display: flex; flex-direction: column; align-items: center; flex: 1;
  background: rgba(30,64,175,0.5); border-radius: 5px; padding: 5px 4px;
  border: 1px solid rgba(147,197,253,0.3);
}
.kpi-card-blue { background: rgba(59,130,246,0.3); border-color: rgba(96,165,250,0.4); }
.kpi-label { font-size: 10px; color: rgba(255,255,255,0.6); }
.kpi-value { font-size: 14px; font-weight: 700; }
.kpi-green { color: rgb(52,211,153); }
.kpi-red { color: rgb(248,113,113); }
.kpi-blue { color: rgb(96,165,250); }

/* Main Content */
.board-content {
  display: flex; gap: 8px; padding: 0 20px 7px; overflow: hidden; flex: 1; min-height: 0;
}

/* Device Panel (left) */
.device-panel {
  display: flex; flex-direction: column; flex: 3;
  border: 1px solid rgba(147,197,253,0.3); border-radius: 6px;
  padding: 8px 10px; background: rgba(30,64,175,0.2); overflow: hidden;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(147,197,253,0.2);
}
.panel-header-left { display: flex; align-items: center; gap: 5px; }
.panel-header-right { display: flex; align-items: center; gap: 7px; }
.panel-title { font-size: 13px; font-weight: 600; color: rgb(147,197,253); }
.panel-count { font-size: 10px; color: rgba(255,255,255,0.5); }
.status-tag { font-size: 10px; font-weight: 600; }
.status-running { color: rgb(96,165,250); }
.status-idle { color: white; }
.status-fault { color: rgb(248,113,113); }
.status-maintain { color: rgb(251,191,36); }
.area-info { font-size: 10px; font-weight: 600; color: rgb(96,165,250); text-align: center; margin-bottom: 4px; }

/* Device Grid */
.device-grid {
  display: flex; flex-wrap: wrap; column-gap: 5px; row-gap: 5px;
  overflow: hidden; align-content: flex-start;
  contain: content; position: relative; flex: 1;
}
/* 老浏览器兼容: margin 替代 gap */
.device-grid > * { margin: 0 5px 5px 0; }
.device-grid > *:nth-child(5n) { margin-right: 0; }
@supports (gap: 5px) {
  .device-grid > * { margin: 0; }
}

.device-card-wrapper { width: calc((100% - 5px * 4) / 5); contain: layout style; }
.device-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 60px; border-radius: 4px; padding: 3px; border: 1px solid rgba(147,197,253,0.3);
  contain: paint; /* 隔离重绘 */
}
.device-name { font-size: 11px; font-weight: 700; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.device-status { font-size: 9px; color: rgba(255,255,255,0.7); margin-top: 1px; }
.device-maintain { font-size: 9px; color: rgb(147,197,253); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* 设备空状态 */
.device-empty {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.empty-text { font-size: 14px; color: rgba(147,197,253,0.6); letter-spacing: 1px; }

/* 保养列表空状态 */
.maintain-empty {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* Sidebar (right) */
.sidebar-panel { display: flex; flex-direction: column; gap: 7px; flex: 1; overflow: hidden; }

/* Maintenance Panel */
.maintain-panel {
  display: flex; flex-direction: column;
  border: 1px solid rgba(147,197,253,0.3); border-radius: 6px;
  padding: 8px 8px 4px; background: rgba(30,64,175,0.2); flex: 5; overflow: hidden; min-height: 0;
}
.maintain-panel .panel-title { margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(147,197,253,0.2); }
.maintain-scroll-viewport { flex: 1; overflow: hidden; min-height: 0; position: relative; }
.maintain-scroll-wrapper {
  display: flex; flex-direction: column; gap: 5px;
  transition: transform 0.6s ease;
  transform: translate3d(0,0,0); /* 初始化合成层 */
}
.maintain-item {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(30,64,175,0.4); border-radius: 4px; padding: 6px 7px;
  border: 1px solid rgba(147,197,253,0.2); flex-shrink: 0; height: 34px; overflow: hidden;
}
.maintain-item-left { display: flex; flex-direction: column; gap: 2px; }
.maintain-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.maintain-device { font-size: 11px; font-weight: 600; }
.maintain-product { font-size: 9px; color: rgba(255,255,255,0.5); }
.maintain-days { font-size: 10px; color: rgb(251,191,36); }
.maintain-status { font-size: 9px; color: rgb(248,113,113); }

/* Chart Panel */
.chart-panel {
  display: flex; flex-direction: column;
  border: 1px solid rgba(147,197,253,0.3); border-radius: 6px;
  padding: 8px; background: rgba(30,64,175,0.2); flex: 5; min-height: 0;
}
.chart-panel .panel-title { margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid rgba(147,197,253,0.2); flex-shrink: 0; }
.chart-container { width: 100%; flex: 1; min-height: 0; }

/* Footer */
.board-footer { display: flex; justify-content: flex-end; padding: 4px 16px 7px; flex-shrink: 0; }
.footer-text { font-size: 10px; color: rgba(255,255,255,0.5); }

/* ======== Loading 动画（电视机简化版） ======== */
.system-loading {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgb(15, 25, 45);
}
.loading-container { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.loading-logo { width: 54px; height: 54px; }
.logo-svg { width: 100%; height: 100%; color: rgb(96,165,250); }
.ring { fill: none; stroke-width: 2; stroke-linecap: round; }
.ring-outer { stroke: rgba(96,165,250,0.3); stroke-dasharray: 20 10; animation: spin 8s linear infinite; transform-origin: center; }
.ring-middle { stroke: rgba(96,165,250,0.5); stroke-dasharray: 80 180; animation: spin 4s linear infinite; transform-origin: center; }
.ring-inner { stroke: rgba(147,197,253,0.7); stroke-dasharray: 15 8; animation: spin-reverse 3s linear infinite; transform-origin: center; }
.clock-hand { stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; }
.center-dot { opacity: 1; /* 电视机：去掉脉冲动画 */ }
.particle { fill: rgb(96,165,250); opacity: 0.8; }
.p1 { animation: orbit 4s linear infinite; transform-origin: 60px 60px; }
.p2 { animation: orbit 6s linear infinite reverse; transform-origin: 60px 60px; }
.p3 { animation: orbit 5s linear infinite; transform-origin: 60px 60px; animation-delay: -2s; }
.loading-info { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.loading-title { font-size: 14px; font-weight: 600; color: rgb(224,242,254); letter-spacing: 1px; margin: 0; }
.progress-bar { width: 94px; }
.progress-track { position: relative; height: 2px; background: rgba(96,165,250,0.2); border-radius: 1px; overflow: hidden; }
.progress-fill { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(59,130,246); border-radius: 1px; animation: progress-indeterminate 1.8s ease-in-out infinite; transform-origin: left center; }
.progress-glow { display: none; /* 电视机去掉辉光效果 */ }
.loading-status { font-size: 10px; color: rgba(255,255,255,0.6); margin: 0; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes progress-indeterminate { 0% { transform: scaleX(0) translateX(0); } 50% { transform: scaleX(0.6) translateX(50%); } 100% { transform: scaleX(0) translateX(94px); } }


.viewport-info {
  font-size: 10px;
  color: rgb(224,242,254);
  white-space: nowrap;
}

/* ======== 老浏览器兼容: flex gap 不支持时用 margin 替代 ======== */
@supports not (gap: 5px) {
  .board-header-logos > * + * { margin-left: 4px; }
  .kpi-row > * + * { margin-left: 5px; }
  .board-content > * + * { margin-left: 8px; }
  .panel-header-left > * + * { margin-left: 5px; }
  .panel-header-right > * + * { margin-left: 7px; }
  .sidebar-panel > * + * { margin-top: 7px; }
  .maintain-scroll-wrapper > * + * { margin-top: 5px; }
  .maintain-item-left > * + * { margin-top: 2px; }
  .maintain-item-right > * + * { margin-top: 2px; }
  .loading-container > * + * { margin-top: 13px; }
  .loading-info > * + * { margin-top: 5px; }
  .device-grid > * { margin: 0 5px 5px 0; }
  .device-grid > *:nth-child(5n) { margin-right: 0; }
}