/* Industry 4.0 cockpit */
.i40-page .page-title { display: flex; align-items: center; gap: 10px; }
.i40-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: i40-pulse 2s infinite;
}
@keyframes i40-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.i40-grid { display: grid; gap: 16px; margin-bottom: 20px; }
.i40-grid-4 { grid-template-columns: repeat(4, 1fr); }
.i40-grid-3 { grid-template-columns: repeat(3, 1fr); }
.i40-grid-2 { grid-template-columns: repeat(2, 1fr); }
.i40-panel {
  background: linear-gradient(145deg, rgba(15,23,42,.92), rgba(30,41,59,.88));
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 12px;
  padding: 18px;
  color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.i40-panel h3 {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: #94a3b8; margin-bottom: 12px;
}
.i40-oee-ring {
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  background: conic-gradient(#22c55e calc(var(--pct) * 1%), #1e293b 0);
  position: relative;
}
.i40-oee-ring::after {
  content: ''; position: absolute; inset: 12px; border-radius: 50%;
  background: #0f172a;
}
.i40-oee-value {
  position: relative; z-index: 1; font-size: 28px; font-weight: 700; color: #f8fafc;
}
.i40-kpi-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.i40-kpi {
  flex: 1; text-align: center; padding: 8px 4px;
  background: rgba(255,255,255,.04); border-radius: 8px;
}
.i40-kpi strong { display: block; font-size: 18px; color: #f1f5f9; }
.i40-kpi span { font-size: 11px; color: #94a3b8; }
.i40-pillar { margin-bottom: 10px; }
.i40-pillar-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.i40-pillar-track { height: 6px; background: #1e293b; border-radius: 99px; overflow: hidden; }
.i40-pillar-fill { height: 100%; background: linear-gradient(90deg, #1e9e3e, #38bdf8); border-radius: 99px; }
.i40-asset-row {
  display: grid; grid-template-columns: 1.2fr .8fr .6fr .8fr .6fr;
  gap: 8px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,.12); font-size: 13px;
}
.i40-asset-row:last-child { border-bottom: none; }
.i40-badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 600;
}
.i40-badge.good { background: rgba(34,197,94,.2); color: #4ade80; }
.i40-badge.ok { background: rgba(56,189,248,.2); color: #7dd3fc; }
.i40-badge.warning { background: rgba(234,179,8,.2); color: #facc15; }
.i40-badge.critical { background: rgba(239,68,68,.25); color: #f87171; }
.i40-badge.unknown { background: rgba(148,163,184,.2); color: #cbd5e1; }
.i40-conn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.i40-conn-item {
  padding: 10px; border-radius: 8px; background: rgba(255,255,255,.04);
  font-size: 12px;
}
.i40-conn-item strong { display: block; color: #f8fafc; margin-bottom: 2px; }
.i40-telemetry-card {
  padding: 10px; border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.1); margin-bottom: 8px; font-size: 12px;
}
.i40-telemetry-card .immat { font-weight: 600; color: #f1f5f9; }
.i40-telemetry-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: #94a3b8; }
.i40-alert-item {
  padding: 10px 12px; border-left: 3px solid #f59e0b;
  background: rgba(245,158,11,.08); border-radius: 0 8px 8px 0;
  margin-bottom: 8px; font-size: 13px;
}
.i40-alert-item.critical { border-left-color: #ef4444; background: rgba(239,68,68,.1); }
.i40-alert-item.high { border-left-color: #f97316; }
.i40-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.i40-toolbar .meta { font-size: 12px; color: rgba(255,255,255,.7); }
@media (max-width: 900px) {
  .i40-grid-4, .i40-grid-3, .i40-grid-2 { grid-template-columns: 1fr; }
  .i40-asset-row { grid-template-columns: 1fr; gap: 4px; }
}