/* Monitoring Center - isolated NOC surface */
.noc-center{
  --noc-bg:#071018;
  --noc-panel:rgba(12,20,32,.92);
  --noc-panel-2:rgba(17,27,43,.88);
  --noc-border:rgba(137,168,207,.18);
  --noc-text:#edf4ff;
  --noc-muted:#8fa3bc;
  --noc-ok:#25d789;
  --noc-warn:#f6c85f;
  --noc-critical:#ff5c7a;
  --noc-info:#60a5fa;
  color:var(--noc-text);
  margin-bottom:28px;
}
.noc-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding:22px;
  border:1px solid var(--noc-border);
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(37,215,137,.14),transparent 32%),
    linear-gradient(225deg,rgba(96,165,250,.15),transparent 36%),
    var(--noc-bg);
  box-shadow:0 22px 70px rgba(0,0,0,.32);
}
.noc-eyebrow{
  margin:0 0 6px;
  color:var(--noc-ok);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
}
.noc-hero h2{
  margin:0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:0;
}
.noc-subtitle{
  max-width:760px;
  margin:10px 0 0;
  color:var(--noc-muted);
  font-size:14px;
}
.noc-hero-side{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.noc-status-pill,.noc-refresh{
  min-height:40px;
  border-radius:999px;
  border:1px solid var(--noc-border);
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}
.noc-status-pill.online{background:rgba(37,215,137,.14);color:var(--noc-ok);border-color:rgba(37,215,137,.35)}
.noc-status-pill.attention{background:rgba(246,200,95,.14);color:var(--noc-warn);border-color:rgba(246,200,95,.38)}
.noc-status-pill.critical{background:rgba(255,92,122,.14);color:var(--noc-critical);border-color:rgba(255,92,122,.4)}
.noc-refresh{
  cursor:pointer;
  background:linear-gradient(135deg,var(--noc-ok),var(--noc-info));
  color:#061016;
}
.noc-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:14px 2px 16px;
  color:var(--noc-muted);
  font-size:12px;
  flex-wrap:wrap;
}
.noc-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.noc-kpi,.noc-panel{
  border:1px solid var(--noc-border);
  background:linear-gradient(180deg,var(--noc-panel),rgba(9,15,25,.92));
  border-radius:12px;
  box-shadow:0 16px 42px rgba(0,0,0,.22);
}
.noc-kpi{
  min-height:116px;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.noc-kpi:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--kpi-color,var(--noc-info));
}
.noc-kpi-label{
  color:var(--noc-muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.noc-kpi-value{
  margin-top:10px;
  font-size:28px;
  line-height:1;
  font-weight:900;
}
.noc-kpi-foot{
  margin-top:10px;
  color:var(--noc-muted);
  font-size:12px;
}
.noc-grid{
  display:grid;
  gap:14px;
  margin-bottom:14px;
}
.noc-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.noc-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.noc-panel{
  padding:16px;
  min-width:0;
}
.noc-panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.noc-panel-head h3{
  margin:0;
  font-size:15px;
  letter-spacing:0;
}
.noc-panel-head span{
  color:var(--noc-muted);
  font-size:11px;
  white-space:nowrap;
}
.noc-stack,.noc-health-list,.noc-log-list,.noc-alert-list,.noc-bars{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.noc-row,.noc-log,.noc-alert,.noc-bar-row{
  border:1px solid rgba(137,168,207,.12);
  border-radius:10px;
  background:var(--noc-panel-2);
  padding:11px 12px;
}
.noc-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.noc-row span,.noc-log-sub,.noc-alert span{
  color:var(--noc-muted);
  font-size:12px;
}
.noc-row strong,.noc-log-title,.noc-alert strong{
  font-size:13px;
  font-weight:800;
}
.noc-alert{
  border-left:4px solid var(--noc-info);
}
.noc-alert.ok{border-left-color:var(--noc-ok)}
.noc-alert.warning{border-left-color:var(--noc-warn)}
.noc-alert.critical{border-left-color:var(--noc-critical)}
.noc-alert.muted{border-left-color:var(--noc-muted)}
.noc-alert strong,.noc-alert span{display:block}
.noc-alert span{margin-top:4px}
.noc-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.noc-table th,.noc-table td{
  border-bottom:1px solid rgba(137,168,207,.12);
  padding:9px 8px;
  text-align:left;
}
.noc-table th{
  color:var(--noc-muted);
  font-size:11px;
  text-transform:uppercase;
}
.noc-chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  font-weight:800;
  font-size:11px;
}
.noc-chip.online{background:rgba(37,215,137,.12);color:var(--noc-ok)}
.noc-chip.offline{background:rgba(255,92,122,.12);color:var(--noc-critical)}
.noc-bar-label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-size:12px;
}
.noc-bar-track{
  height:8px;
  border-radius:999px;
  background:rgba(137,168,207,.12);
  overflow:hidden;
}
.noc-bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--noc-warn),var(--noc-critical));
}
.noc-empty{
  color:var(--noc-muted);
  font-size:13px;
  padding:12px;
}
.noc-center.is-loading .skeleton{
  background:linear-gradient(90deg,rgba(137,168,207,.08),rgba(137,168,207,.18),rgba(137,168,207,.08));
  background-size:220% 100%;
  animation:nocPulse 1.2s infinite linear;
}
@keyframes nocPulse{to{background-position:-220% 0}}
@media (max-width:1100px){
  .noc-kpi-grid,.noc-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .noc-hero{flex-direction:column;padding:16px}
  .noc-hero h2{font-size:26px}
  .noc-hero-side,.noc-status-pill,.noc-refresh{width:100%}
  .noc-kpi-grid,.noc-grid.two,.noc-grid.three{grid-template-columns:1fr}
  .noc-panel-head{flex-direction:column}
  .noc-panel-head span{white-space:normal}
  .noc-table-wrap{overflow-x:auto}
}