/* Control room (Overview). Simple on purpose: one status line, four numbers, what needs attention, and the machines. Uses theme tokens. */
.cr-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.cr-head h1{margin:0}
.cr-live{display:flex;align-items:center;gap:10px}
.cr-clock{font-family:var(--num);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.cr-pulse{width:9px;height:9px;border-radius:50%;background:var(--green);animation:crpulse 1.8s infinite}
@keyframes crpulse{70%{box-shadow:0 0 0 9px rgba(0,200,83,0)}100%{box-shadow:0 0 0 0 rgba(0,200,83,0)}}
.cr-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:12px;border-radius:var(--r);border:1px solid var(--border);border-left:8px solid var(--green);background:var(--green-lt);font-size:17px}
.cr-banner.warn{border-left-color:var(--amber);background:var(--amber-lt)}
.cr-banner.bad{border-left-color:var(--red);background:var(--red-lt)}
.cr-banner.bad b{color:var(--red)}
.cr-dot-lg{width:14px;height:14px;border-radius:50%;background:var(--green);flex:none}.cr-banner.warn .cr-dot-lg{background:var(--amber)}.cr-banner.bad .cr-dot-lg{background:var(--red)}
.cr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.cr-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--font);cursor:pointer}
.cr-kpi:hover{border-color:var(--border2)}
.cr-kpi b{font-family:var(--num);font-size:34px;line-height:1.05;font-variant-numeric:tabular-nums}
.cr-kpi span{font-size:14px;font-weight:700}
.cr-kpi small{font-size:12.5px;color:var(--text2)}
.cr-kpi.red b{color:var(--red)}.cr-kpi.amber b{color:var(--amber)}
.cr-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px;align-items:start}
.cr-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;min-width:0}
.cr-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cr-ph h2{margin:0;font-size:14px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--text2)}
.cr-count{font-family:var(--num);font-size:15px;font-weight:700;padding:1px 10px;border-radius:10px;background:var(--surface2);color:var(--text2)}.cr-count.hot{background:var(--red);color:#fff}
.cr-feed{display:flex;flex-direction:column;gap:6px}
.cr-row{display:grid;grid-template-columns:116px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-left:5px solid var(--blue);border-radius:var(--r);color:var(--text);font-family:var(--font);cursor:pointer}
.cr-row:hover{border-color:var(--border2)}
.cr-row.sev0{border-left-color:var(--red);background:linear-gradient(90deg,var(--red-lt),var(--surface2) 70%)}.cr-row.sev1{border-left-color:var(--red)}.cr-row.sev2{border-left-color:var(--amber)}
.cr-tag{font-size:10.5px;font-weight:800;letter-spacing:.5px;padding:3px 6px;border-radius:3px;border:1px solid var(--border2);color:var(--text2);text-align:center}
.cr-row.sev0 .cr-tag{background:var(--red);border-color:var(--red);color:#fff}.cr-row.sev1 .cr-tag{color:var(--red);border-color:var(--red)}.cr-row.sev2 .cr-tag{color:var(--amber);border-color:var(--amber)}
.cr-main{display:flex;flex-direction:column;gap:2px;min-width:0}.cr-main b{font-size:15.5px}.cr-main span{font-size:13.5px;color:var(--text2);overflow-wrap:anywhere}
.cr-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}.cr-side b{font-size:13.5px}.cr-side span{font-size:12.5px;color:var(--text2)}
.cr-un{color:var(--red)!important;font-weight:800}
.cr-mach{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:var(--font);cursor:pointer}
.cr-mach:hover{border-color:var(--border2)}
.cr-mach b{display:block;font-size:15px}.cr-mach div span{font-size:12.5px;color:var(--text2)}
.cr-led{width:14px;height:14px;border-radius:50%;background:var(--green)}
.cr-mach.st-watch .cr-led{background:var(--amber)}.cr-mach.st-alert .cr-led{background:var(--red)}.cr-mach.st-down .cr-led{background:var(--red);box-shadow:0 0 0 3px var(--red-lt)}
.cr-st{font-size:12.5px;font-weight:800;color:var(--green)}.cr-mach.st-watch .cr-st{color:var(--amber)}.cr-mach.st-alert .cr-st,.cr-mach.st-down .cr-st{color:var(--red)}
.cr-empty{padding:18px;text-align:center;color:var(--text2);border:1px dashed var(--border2);border-radius:var(--r)}.cr-empty.ok{color:var(--green)}
@media(max-width:900px){.cr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.cr-grid{grid-template-columns:1fr}.cr-row{grid-template-columns:1fr}.cr-side{align-items:flex-start;text-align:left}}
@media(prefers-reduced-motion:reduce){.cr-pulse{animation:none}}
/* On a normal desktop window the page does not scroll: the two lists share the remaining height and scroll on their own */
@media(min-width:901px) and (min-height:470px){
  body.cr-fit{overflow:hidden}
  body.cr-fit .shell{height:100vh;min-height:0;overflow:hidden}
  body.cr-fit .side{overflow-y:auto;overflow-x:hidden}
  body.cr-fit .main{height:100vh;max-width:none;overflow:hidden;display:flex;flex-direction:column;padding:14px 20px}
  body.cr-fit .main>*{animation:none;flex:none}
  body.cr-fit .main>.cr-grid{flex:1 1 0;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr)}
  body.cr-fit .cr-panel{display:flex;flex-direction:column;min-height:0}
  body.cr-fit .cr-ph{flex:none}
  body.cr-fit .cr-body{flex:1 1 0;min-height:0;overflow:auto}
}
@media(min-width:901px) and (min-height:470px) and (max-height:700px){
  body.cr-fit .main{padding:10px 16px}
  body.cr-fit .cr-head{margin-bottom:6px}.cr-head h1{font-size:22px}
  body.cr-fit .cr-banner{padding:8px 14px;margin-bottom:8px;font-size:15px}
  body.cr-fit .cr-kpis{margin-bottom:8px}body.cr-fit .cr-kpi{padding:6px 12px}body.cr-fit .cr-kpi b{font-size:26px}
}