:root{
  --bg:#0b0f16;
  --card:#121a26;
  --muted:#9fb0c3;
  --text:#e7eef7;
  --line:#223044;
  --accent:#6ee7ff;
  --accent2:#9b7bff;
}
*{ box-sizing:border-box; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; 
      /*background:linear-gradient(180deg,#070b11, var(--bg)); */
      background: radial-gradient(1200px 600px at 80% 100%, rgba(120,160,255,0.16), transparent 60%),
              radial-gradient(900px 500px at 20% 50%, rgba(120,255,190,0.10), transparent 60%),
              var(--bg);
      color:var(--text); }

.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 30%, var(--accent), transparent 55%),
             radial-gradient(circle at 70% 70%, var(--accent2), transparent 55%),
             #182235;
  border:1px solid #2b3a56;
  font-weight:800;
}
.title{ font-size:16px; font-weight:800; letter-spacing:.06em; }
.subtitle{ font-size:12px; color:var(--muted); }

#app-shell{ display:flex; height:100vh; }
#sidebar{
  width:260px; padding:14px; background:var(--panel);
  border-right:1px solid var(--line); overflow:auto;
}
#sidebar h4{ margin:14px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
#sidebar a{ display:block; padding:10px 10px; border-radius:10px; color:var(--text); text-decoration:none; }
#sidebar a:hover{ background:#132033; }

#main{ flex:1; display:flex; flex-direction:column; }
#topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border-bottom:1px solid var(--line); background:rgba(16,24,38,.6); backdrop-filter: blur(6px);
  
  padding:16px 18px; 
  background:rgba(10,14,22,.65); backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:10;

}
#view{ padding:18px; overflow:auto; }
.small{ color:var(--muted); font-size:12px; }

.card{
  background:linear-gradient(180deg, rgba(18,26,38,.9), rgba(12,18,28,.9));
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.card h2{ margin:0 0 10px; font-size:14px; letter-spacing:.03em; }
.card h3{ margin:10px 0 8px; font-size:13px; color:var(--muted); font-weight:700; }

.row{ display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; margin:8px 0; }
.row label{ color:var(--muted); font-size:12px; }
input, textarea{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0d1420;
  color:var(--text);
}
textarea{ resize:vertical; }

button{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid #2a3a55;
  background:linear-gradient(180deg,#162235,#0e1726);
  color:var(--text);
  cursor:pointer;
}
button:hover{ border-color:#3a557a; }

.out{
  margin:10px 0 0;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#08101c;
  color:#cfe3ff;
  overflow:auto;
  max-height:260px;
  font-size:12px;
  line-height:1.35;
}
.out.big{ max-height:520px; }

.toolbar{ display:flex; gap:8px; margin:8px 0; }
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.list{
  border:1px solid var(--line);
  border-radius:12px;
  background:#08101c;
  padding:8px;
  max-height:420px;
  overflow:auto;
}
.item{
  padding:8px;
  border-radius:10px;
  border:1px solid transparent;
  margin:6px 0;
  cursor:pointer;
}
.item:hover{ border-color:#2b3a56; background:rgba(110,231,255,.05); }
.item .id{ font-size:12px; font-weight:700; }
.item .meta{ font-size:11px; color:var(--muted); margin-top:2px; }


#debug-drawer{
  position:fixed; top:0; right:0; width:420px; height:100vh; padding:14px;
  background:#0e1522; border-left:1px solid var(--line); overflow:auto; z-index:50;
}

.eventsToolbar{
  position: sticky;
  top: 54px; /* se la topbar è ~44-50px */
  z-index: 6;
  background: rgba(10,14,22,.65);
  backdrop-filter: blur(10px);
}
.spacer{ flex:1; }

.topQuick{
  display:flex;
  gap:8px;
  align-items:center;
}
.topQuick input{
  width:220px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0d1420;
  color:var(--text);
}

/* Nexagon internal navigation links */
.nx-nav-link,
.nx-nav-link:visited {
  color: inherit;
  /*color: var(--fg);*/              /* stesso colore del testo */
  text-decoration: none;
}

.nx-nav-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* Sentinel / generic status badges */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: inherit;
  white-space: nowrap;
}

.badge-online {
  background: rgba(0, 200, 120, 0.14);
  border-color: rgba(0, 200, 120, 0.25);
}

.badge-degraded {
  background: rgba(255, 165, 0, 0.14);
  border-color: rgba(255, 165, 0, 0.25);
}

.badge-offline {
  background: rgba(255, 80, 80, 0.14);
  border-color: rgba(255, 80, 80, 0.25);
}

.badge-unknown {
  opacity: 0.85;
}