:root {
  --bg: #0f172a; --panel: #1e293b; --line: #334155; --txt: #e2e8f0;
  --muted: #94a3b8; --accent: #3b82f6; --ok: #22c55e; --bad: #ef4444; --warn: #f59e0b;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--txt); }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.85rem; }
button { cursor: pointer; }
code { background: #0b1220; padding: 1px 5px; border-radius: 4px; }

/* login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--panel); padding: 2rem; border-radius: 12px; width: 320px;
  display: flex; flex-direction: column; gap: 0.75rem; border: 1px solid var(--line); }
.login-card h1 { margin: 0; font-size: 1.9rem; }
.login-card input { padding: 0.6rem; border-radius: 8px; border: 1px solid var(--line);
  background: #0b1220; color: var(--txt); }
.login-card button { padding: 0.6rem; border: none; border-radius: 8px;
  background: var(--accent); color: white; font-weight: 600; }
.error { color: var(--bad); font-size: 0.85rem; min-height: 1rem; }

/* topbar */
.topbar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); letter-spacing: 0.01em; }
.topbar nav { display: flex; gap: 0.4rem; }
.tab { background: transparent; border: none; color: var(--muted); padding: 0.5rem 1rem;
  border-radius: 8px; font-size: 1.15rem; font-weight: 500; }
.tab.active { background: var(--accent); color: white; }
.spacer { flex: 1; }
.link { background: none; border: none; color: var(--accent); }

.tab-panel { padding: 1.25rem; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.card .num.prod { color: #a78bfa; }   /* Production VMs -- violet (distinct from green) */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.2rem; text-align: center; }
.card .num { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); font-weight: 700; }
.card .lbl { color: var(--muted); font-size: clamp(0.78rem, 0.7rem + 0.25vw, 0.95rem); }

/* charts */
.charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.chart-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.chart-box { cursor: pointer; }
.chart-box h3 { margin: 0 0 0.6rem; font-size: clamp(1rem, 0.72rem + 0.7vw, 1.3rem); line-height: 1.25; }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chart-head select { padding: 0.35rem 0.55rem; border-radius: 8px;
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem);
  border: 1px solid var(--line); background: #0b1220; color: var(--txt); }

/* project chart: scrollable so all projects are visible */
.proj-scroll { max-height: 300px; overflow-y: auto; overflow-x: hidden; }
#chart-proj-inner { position: relative; width: 100%; height: 260px; }

/* enlarged chart popup */
.chart-modal { width: 92vw; max-width: 1100px; }
.chart-modal h3 { margin: 0 0 0.75rem; font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); }
.chart-modal-body { max-height: 74vh; overflow-y: auto; overflow-x: hidden; }
.chart-modal-canvas-wrap { position: relative; width: 100%; height: 480px; }
.chart-box canvas { max-height: 240px; }
/* the project chart is a scrollable, variable-height bar list -- don't cap it */
#chart-proj-inner canvas { max-height: none !important; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
.gaps { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.gaps h3 { margin: 0 0 0.75rem; font-size: clamp(1rem, 0.72rem + 0.7vw, 1.3rem); }

/* Cluster utilization panel */
.clusters-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; }
.cluster-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.cluster-head h3 { margin: 0; font-size: clamp(1rem, 0.72rem + 0.7vw, 1.3rem); }
.cluster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 950px)  { .cluster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cluster-grid { grid-template-columns: 1fr; } }
.ccard { background: #0b1220; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.chead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cname { font-size: 1.2rem; font-weight: 700; }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: middle; }
.cmetric { margin-bottom: 16px; }
.cmrow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.clbl { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cval { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 700; }
.cbar { height: 9px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.cfill { height: 100%; border-radius: 5px; transition: width 0.4s ease; }
.csub { font-size: 0.8rem; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* badges */
.badge { padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge.ok   { background: rgba(34,197,94,0.2);  color: var(--ok); }
.badge.bad  { background: rgba(239,68,68,0.2);  color: var(--bad); }
.badge.warn { background: rgba(245,158,11,0.2); color: var(--warn); }
.badge.na   { background: rgba(148,163,184,0.2); color: var(--muted); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.filters select, .filters button { padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--line); background: #0b1220; color: var(--txt); }
.filters button { background: var(--accent); border: none; color: white; }
.filters .link { background: none; }
.chk { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); }

/* add */
.add-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem; max-width: 560px; }
.add-card input { width: 100%; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--line);
  background: #0b1220; color: var(--txt); margin: 0.75rem 0; }
.add-card button { padding: 0.6rem 1.2rem; border: none; border-radius: 8px;
  background: var(--accent); color: white; font-weight: 600; }
.result { margin-top: 0.75rem; font-size: 0.9rem; }
.result.ok  { color: var(--ok); }
.result.bad { color: var(--bad); }

.actions { display: flex; gap: 0.75rem; }
.link.danger { color: var(--bad); }
#u-role { width: 100%; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--line);
  background: #0b1220; color: var(--txt); margin-bottom: 0.75rem; }

/* keep OS names on a single line */
td.nowrap { white-space: nowrap; }

/* Executive view */
.exec-head { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.exec-head h3 { margin: 0; font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.4rem); }
.exec-head input[type="search"] { padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--line); background: #0b1220; color: var(--txt); min-width: 240px; }
.exec-proj { padding: 0; font-size: inherit; text-align: left; }
.exec-tag { display: inline-block; font-size: 0.68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; background: var(--bg);
  padding: 1px 6px; border-radius: 4px; margin-right: 5px; }
#exec-table td { vertical-align: middle; }
.exec-tools { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
#exec-add-btn { padding: 0.45rem 0.8rem; border: none; border-radius: 8px;
  background: var(--accent); color: white; font-weight: 600; }
/* VM Count column: right-align only when it's the last col; keep Actions left */
#exec-table th:nth-child(4), #exec-table td:nth-child(4) { text-align: right; width: 6rem; }

/* pending VMs badge */
.pending-badge { background: var(--warn); color: #1a1300; border-radius: 999px;
  padding: 0 6px; font-size: 0.7rem; font-weight: 700; margin-left: 2px; }

/* project details popup */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem; width: 480px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
  position: relative; }
.modal-card h3 { margin: 0 0 1rem; }
.modal-close { position: absolute; top: 0.6rem; right: 0.8rem; background: none;
  border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.pm-fields { display: grid; grid-template-columns: 130px 1fr; gap: 0.5rem 1rem; margin: 0; }
.pm-fields dt { color: var(--muted); font-size: 0.85rem; }
.pm-fields dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.vm-link, .tier-link { padding: 0; font-size: inherit; text-align: left; }
/* ===== FONT SIZES you can tune (VM list + Executive view) ===== */
/* VM list: every column cell (Location, Project, Env, IP, OS, Cluster...) */
#vm-table { font-size: 1.15rem; }
#vm-table th { font-size: 1.25rem; font-weight: 700; }   /* column headers (Location, Project...) */
#vm-table td, #vm-table th { padding: 0.65rem 0.75rem; }
#vm-table .vm-link, #vm-table .tier-link { font-size: 1.2rem; font-weight: 600; }  /* VM name / tier */
/* Network devices table: same sizing as the VMs table */
#net-table { font-size: 1.15rem; }
#net-table th { font-size: 1.25rem; font-weight: 700; }   /* column headers (Name, IP, Type...) */
#net-table td, #net-table th { padding: 0.65rem 0.75rem; }
#net-table td:first-child { font-size: 1.2rem; font-weight: 600; }  /* device name */
/* Executive: every cell (Project, Detail, Owner, VM Count) */
#exec-table { font-size: 1.2rem; }
#exec-table th { font-size: 1.3rem; font-weight: 700; }   /* column headers (Project, Owner...) */
#exec-table td, #exec-table th { padding: 0.7rem 0.8rem; }
#exec-table .exec-proj { font-size: 1.35rem; font-weight: 600; }  /* project name */
/* ============================================================== */
.tier-plain { font-size: inherit; color: var(--txt); }
#pd-owner, #pd-description, #pd-purpose, #pd-details { width: 100%; padding: 0.6rem;
  border-radius: 8px; border: 1px solid var(--line); background: #0b1220; color: var(--txt);
  margin: 0.4rem 0; font-family: inherit; }

/* HA help */
.ha-help { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.6rem 1rem; margin-bottom: 1rem; font-size: 0.88rem; }
.ha-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.ha-help ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.ha-help li { margin: 0.3rem 0; }

/* legacy VM form */
.lv-row { display: flex; gap: 0.5rem; }
.lv-row > input, .lv-row > select { flex: 1; min-width: 0; margin: 0.35rem 0;
  padding: 0.6rem; border-radius: 8px; border: 1px solid var(--line);
  background: #0b1220; color: var(--txt); }

/* search + pager */
.filters input[type="search"] { padding: 0.45rem 0.6rem; border-radius: 8px;
  border: 1px solid var(--line); background: #0b1220; color: var(--txt); min-width: 220px; }
.pager { display: flex; align-items: center; gap: 1rem; justify-content: center;
  padding: 0.75rem 0; }
.pager button:disabled { color: var(--muted); cursor: default; opacity: 0.5; }

/* settings -- auto-fit fills the row width (cards stretch, not piled on the left) */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; align-items: start; }
.settings-grid .add-card { max-width: none; width: 100%; padding: 1rem; }
.ref-add { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.ref-add input { flex: 1; min-width: 0; margin: 0; padding: 0.5rem; border-radius: 8px;
  border: 1px solid var(--line); background: #0b1220; color: var(--txt); }
.ref-add button { padding: 0.5rem 0.9rem; }
.ref-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.ref-list li { display: flex; justify-content: space-between; align-items: center;
  gap: 0.5rem; padding: 0.3rem 0.2rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.ref-list li > span { min-width: 0; overflow-wrap: anywhere; }
/* text-link buttons inside settings cards must stay plain (not the filled primary style) */
.add-card .link { background: none; border: none; padding: 0; font-weight: 400;
  border-radius: 0; width: auto; margin: 0; font-size: 0.85rem; white-space: nowrap; }
.ref-actions { display: flex; gap: 0.8rem; flex-shrink: 0; }

/* Connectivity flow builder (Settings) */
.fl-steps { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.fl-steps li { display: flex; justify-content: space-between; align-items: center;
  background: #0b1220; border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.6rem; }
.fl-chip { font-weight: 600; }
.fl-chip.ext { color: #a78bfa; }
.fl-ctl { display: flex; gap: 0.4rem; }
.fl-ctl button { padding: 0; }

/* flow builder connection rows */
.fl-conn { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.fl-conn select { padding: 0.4rem; border-radius: 8px; border: 1px solid var(--line);
  background: #0b1220; color: var(--txt); }
.fl-conn button { padding: 0.4rem 0.7rem; }
.fl-lbl { color: var(--muted); font-size: 0.85rem; min-width: 108px; }
.fl-to { color: var(--muted); }
.fl-extbadge { background: rgba(167,139,250,0.18); color: #a78bfa; font-size: 0.68rem;
  padding: 1px 6px; border-radius: 5px; margin-left: 5px; }

/* Topology diagram modal (layered graph) */
.topo-modal { width: 94vw; max-width: 1200px; }
.topo-modal h3 { text-align: center; }
.topo-viewtabs { display: flex; justify-content: center; gap: 0.5rem; margin: 0.2rem 0 0.9rem; }
.topo-viewtab { background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  padding: 0.4rem 1.1rem; border-radius: 8px; font-size: 1rem; cursor: pointer; }
.topo-viewtab.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.topo-body { max-height: 74vh; overflow: auto; display: flex; gap: 2.5rem; flex-wrap: wrap;
  align-items: flex-start; justify-content: center; padding: 0.5rem 0.25rem; }
.topo-legend { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.topo-leg { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.85rem; }
.topo-extproj { font-size: 0.82rem; margin-bottom: 0.45rem; }
.topo-flow { display: flex; flex-direction: column; align-items: center; }
.topo-flow-name { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.8rem; color: var(--txt); }
.topo-graph { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 2.4rem; padding: 0.3rem; max-width: 100%; overflow: auto; }
.topo-edges { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.topo-level { display: flex; gap: 3rem; justify-content: center; align-items: flex-start;
  position: relative; z-index: 1; flex-wrap: nowrap; }
/* keep the internal backbone centered; external hops branch into the right lane */
.topo-side { flex: 0 0 auto; display: flex; }
.topo-core { display: flex; gap: 1.6rem; justify-content: center; align-items: flex-start; }
.topo-extlane { justify-content: flex-start; align-items: flex-end; gap: 3rem; }
.topo-leftlane { justify-content: flex-end; align-items: flex-start; gap: 3rem; }
.topo-extlane:empty, .topo-side:empty { min-width: 0; }
/* multi-VIP: user / internet nodes stacked on top of their device */
.topo-devstack { display: flex; flex-direction: column; align-items: center; gap: 2.6rem; }
.topo-node { background: #0b1220; border: 2px solid var(--line); border-radius: 12px;
  padding: 0.65rem 0.8rem; width: 232px; flex-shrink: 0; position: relative; z-index: 1; }
.topo-extnode { border-style: dashed; }
.topo-entrynode { width: 200px; }
.topo-entrynode .topo-sub { font-size: 0.84rem; color: var(--txt);
  font-variant-numeric: tabular-nums; word-break: break-word; }
.topo-internet { width: 200px; border-style: dotted; background: rgba(249,115,22,0.08); }
.topo-internet .topo-sub { font-size: 0.82rem; color: var(--muted); }
.topo-netdev { width: 210px; }
.topo-usernode { width: 190px; }
.topo-zone { font-size: 0.62rem; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  margin-left: 4px; letter-spacing: 0.04em; flex-shrink: 0; }
.topo-netdev .topo-sub, .topo-usernode .topo-sub { font-size: 0.82rem; color: var(--muted); }
.topo-f5node { width: 250px; }
.topo-vips { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.45rem; }
.topo-vipblock { background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.25rem 0.45rem; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.topo-viptier { font-weight: 700; color: var(--accent); margin-right: 0.3rem; }
/* Network connectivity builder (Settings) */
.nf2-build { margin-top: 0.5rem; }
.nf2-hdr { font-size: 0.82rem; color: var(--muted); margin: 0.7rem 0 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.nf2-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.nf2-tier { font-weight: 600; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.5rem; }
.nf2-arr { color: var(--muted); }
.nf2-dev { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(168,85,247,0.14);
  border: 1px solid #a855f7; color: #d8b4fe; border-radius: 6px; padding: 0.15rem 0.4rem; font-size: 0.85rem; }
.nf2-devx { background: none; border: none; color: #f87171; cursor: pointer; font-size: 0.8rem; padding: 0 0.1rem; }
.nf2-devsel { max-width: 15rem; }
.row-btns { display: flex; gap: 0.6rem; align-items: center; }
.danger-btn { background: #3a1418; border: 1px solid #7f1d1d; color: #fca5a5; }
.danger-btn:hover { background: #511a20; }
.topo-ico { flex-shrink: 0; display: inline-flex; }
.topo-nm { font-weight: 600; font-size: 0.98rem; }
.topo-code { color: var(--muted); font-weight: 400; font-size: 0.82rem; }
.topo-sub { color: var(--muted); font-size: 0.8rem; }
.topo-ext { background: rgba(167,139,250,0.18); color: #a78bfa; font-size: 0.68rem;
  padding: 1px 6px; border-radius: 5px; margin-left: 4px; }
.topo-thead { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.45rem; flex-wrap: wrap; }
.topo-entryline { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem;
  margin-bottom: 0.4rem; font-variant-numeric: tabular-nums; }
.topo-entryline svg { width: 16px; height: 16px; flex-shrink: 0; }
.topo-tier { cursor: pointer; }
/* No per-node inner scroll: nodes grow to show all VMs; the modal body scrolls
   (single scrollbar on the side) instead of a scrollbar in the middle of the diagram. */
.topo-vms { display: flex; flex-direction: column; gap: 0.22rem; }
.topo-vm { text-align: left; background: var(--bg); border: 1px solid var(--line); color: var(--txt);
  border-radius: 6px; padding: 0.28rem 0.45rem; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-vm:hover { border-color: var(--accent); color: var(--accent); }

/* VM edit modal */
#vm-edit-modal .modal-card { width: 640px; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
.edit-grid label { display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 0.78rem; color: var(--muted); }
.edit-grid input, .edit-grid select { padding: 0.5rem; border-radius: 8px;
  border: 1px solid var(--line); background: #0b1220; color: var(--txt); font-size: 0.9rem; }
.edit-actions { display: flex; gap: 1rem; align-items: center; margin-top: 0.75rem; }
.edit-actions button:first-child { padding: 0.55rem 1.1rem; border: none; border-radius: 8px;
  background: var(--accent); color: white; font-weight: 600; }
@media (max-width: 560px) { .edit-grid { grid-template-columns: 1fr; } }

/* responsive: scale the dashboard grids to the screen */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .charts { grid-template-columns: 1fr; }
  .chart-modal { width: 96vw; }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .filters { flex-wrap: wrap; }
}

/* ---------- Infrastructure view (sites, network + Nutanix boxes, drill-downs) ---------- */
.infra-canvas { position: relative; overflow-x: auto; padding: 1rem 0.5rem 2rem; }
.infra-edges { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
.infra-wrap { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 3rem; min-width: max-content; }
.infra-inet { border: 2px dotted #f97316; background: rgba(249,115,22,0.08);
  border-radius: 999px; padding: 0.6rem 1.8rem; font-weight: 700; z-index: 1; position: relative; }
.infra-body { display: flex; align-items: flex-start; gap: 5rem; z-index: 1; position: relative; }
.infra-site { border: 2px solid var(--line); border-radius: 16px; background: #0b1220;
  padding: 1rem; position: relative; z-index: 1; }
.infra-hq { border-color: #3b82f6; padding: 1.6rem; }
.infra-site-head { font-weight: 800; font-size: 1.1rem; margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem; }
.infra-hq .infra-site-head { font-size: 1.4rem; }
.infra-badge { background: rgba(59,130,246,0.18); color: #3b82f6; border-radius: 6px;
  padding: 2px 8px; font-size: 0.7rem; font-weight: 700; }
.infra-site-body { display: flex; align-items: flex-start; gap: 3rem; }
.infra-box { border: 2px solid var(--line); border-radius: 12px; padding: 0.8rem;
  background: #0d1526; min-width: 210px; }
.infra-hq .infra-box { min-width: 245px; }
.infra-box h4 { margin: 0 0 0.65rem; font-size: 0.95rem; display: flex; flex-direction: column; gap: 2px; }
.infra-box h4 small { color: var(--muted); font-weight: 400; font-size: 0.74rem; }
.infra-click { cursor: pointer; }
.infra-click:hover { background: #131c33; }
.infra-netbox { border-color: #a855f7; }
.infra-nutanix { border-color: #14b8a6; }
.infra-appsbox { border-color: #f59e0b; }
.infra-users { border-color: #38bdf8; align-self: center; }
.infra-chips { display: flex; flex-direction: column; gap: 0.5rem; }
.infra-chip { border: 2px solid var(--line); border-radius: 8px; padding: 0.4rem 0.6rem;
  font-size: 0.85rem; font-weight: 600; display: flex; flex-direction: column; background: #0b1220; }
.infra-chip small { font-weight: 400; color: var(--muted); font-size: 0.72rem; }
.infra-chip.dmz { border-color: #ef4444; color: #ef4444; }
.infra-chip.dc { border-color: #a855f7; color: #a855f7; }
.infra-chip.app { border-color: #14b8a6; color: #14b8a6; }
.infra-branches { display: flex; flex-direction: column; gap: 2.5rem; }
.infra-branch { border-color: #f59e0b; }
.infra-empty { color: var(--muted); font-size: 0.85rem; }
/* drill-down chrome */
.infra-crumb { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.infra-back { background: #1f2a44; border: 1px solid var(--line); color: var(--txt);
  border-radius: 8px; padding: 0.35rem 0.8rem; cursor: pointer; font-weight: 600; }
.infra-back:hover { background: #2a3757; }
.infra-crumb-txt { color: #cfe0f5; font-size: 1.7rem; font-weight: 700; }
.infra-clusters { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.infra-clbox { border: 2px solid #14b8a6; border-radius: 14px; padding: 1rem; background: #0d1526; min-width: 260px; }
.infra-clbox h4 { margin: 0 0 0.7rem; font-size: 1rem; }
.infra-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.5rem;
  padding-top: 0.9rem; border-top: 1px solid var(--line); }
.infra-leg { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.85rem; }
.infra-swatch { width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }

/* icons on the main infrastructure view */
.infra-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.infra-ico svg { width: 22px; height: 22px; }
.infra-box h4 .infra-ico svg { width: 20px; height: 20px; }
.infra-hd { display: flex; align-items: center; gap: 0.5rem; }
.infra-chip { flex-direction: row; align-items: center; gap: 0.55rem; }
.infra-chip .infra-ico svg { width: 18px; height: 18px; }
.infra-chip-txt { display: flex; flex-direction: column; line-height: 1.25; }
/* readable, consistent type scale inside the view */
.infra-site-head { font-size: 1.15rem; }
.infra-hq .infra-site-head { font-size: 1.4rem; }
.infra-box h4 { font-size: 1rem; }
.infra-box h4 small { font-size: 0.78rem; }
.infra-chip { font-size: 0.92rem; }
.infra-chip small { font-size: 0.76rem; }
.infra-inet { font-size: 1rem; }
.infra-edge-lbl { font-size: 0.78rem; fill: var(--muted); }

/* edges must paint above each site's background, but under the boxes they join */
.infra-site { z-index: auto; }
.infra-edges { z-index: 2; }
.infra-box, .infra-inet, .infra-site-head { position: relative; z-index: 3; }
.infra-users { align-self: flex-start; }
.infra-hq .infra-users { align-self: center; }

/* compact inner boxes: several (network + Nutanix/apps + users) fit in one site box */
.infra-site-body { gap: 1.4rem; align-items: flex-start; }
.infra-box { min-width: 0; padding: 0.55rem 0.6rem; }
.infra-hq .infra-box { min-width: 0; }
.infra-box h4 { font-size: 0.85rem; margin: 0 0 0.45rem; }
.infra-box h4 small { font-size: 0.68rem; }
.infra-chips { gap: 0.3rem; }
.infra-chip { padding: 0.28rem 0.45rem; font-size: 0.78rem; gap: 0.4rem; border-width: 1px; border-radius: 6px; }
.infra-chip small { font-size: 0.65rem; }
.infra-chip .infra-ico svg { width: 14px; height: 14px; }
.infra-box h4 .infra-ico svg { width: 16px; height: 16px; }
.infra-site { padding: 0.8rem; }
.infra-hq { padding: 1rem; }
.infra-site-head { font-size: 1rem; margin-bottom: 0.6rem; }
.infra-hq .infra-site-head { font-size: 1.15rem; }
.infra-body { gap: 3rem; }

/* room between the Internet and the sites so WAN labels never touch a box or each other */
.infra-wrap { gap: 5.5rem; }
.infra-branches { gap: 3.5rem; }

/* routing channel under the HQ boxes for the Local Users -> Network devices link */
.infra-hq .infra-site-body { padding-bottom: 1.7rem; }

/* Nutanix Cluster box gets its own colour; the application chips inside keep theirs */
.infra-nutanix { border-color: #22c55e; }
.infra-clbox { border-color: #22c55e; }

/* HQ: Local Users sit at the bottom, centred under the network + Nutanix boxes */
.infra-hq-users { display: flex; justify-content: center; margin-top: 2.4rem; }
.infra-hq .infra-site-body { padding-bottom: 0; }
.infra-hq .infra-users { align-self: auto; }

/* application / Nutanix boxes: same compact footprint as the network box */
.infra-nutanix, .infra-appsbox { max-width: 180px; }
.infra-nutanix .infra-chip, .infra-appsbox .infra-chip { padding: 0.25rem 0.4rem; font-size: 0.75rem; }
.infra-nutanix .infra-chip small, .infra-appsbox .infra-chip small { font-size: 0.63rem; }
.infra-netbox { max-width: 200px; }
/* keep the branch column clear of the WAN bus running down its left */
.infra-branches { margin-left: 1.2rem; }

/* HQ users sit left of the network box, centred against it */
.infra-hq .infra-users { align-self: center; }

/* sites sit side by side so each gets its own Internet drop with nothing to cross */
.infra-branches { flex-direction: row; align-items: flex-start; margin-left: 0; }
.infra-body { align-items: flex-start; gap: 3.5rem; }

/* application picker: scales to 50+ projects - search + scrollable grid, one row each */
.infra-appsel-tools { display: flex; gap: 0.6rem; align-items: center; margin: 0.45rem 0; }
.infra-appsel-tools input { flex: 1; min-width: 0; padding: 0.4rem 0.55rem; border-radius: 8px;
  border: 1px solid var(--line); background: #0b1220; color: var(--txt); }
.infra-appsel { max-height: 240px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 8px; padding: 0.35rem; background: #0b1220; margin-bottom: 0.8rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.1rem; }
.infra-appsel .chk { padding: 0.3rem 0.45rem; border-radius: 6px; min-width: 0; }
.infra-appsel .chk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-appsel .chk:hover { background: #131c33; }
.infra-appsel .infra-none { color: var(--muted); font-size: 0.85rem; padding: 0.4rem; }

/* .add-card input{width:100%;margin:.75rem 0} was stretching every checkbox to full width,
   shoving its label out of the cell - that was the overlap. Checkboxes size to themselves. */
.add-card input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
.infra-appsel .chk { justify-content: flex-start; gap: 0.45rem; }
.infra-appsel .chk span { flex: 1 1 auto; text-align: left; }
.infra-appsel-tools input[type="search"] { margin: 0; }

/* Riyadh (HQ) on the left; branches stacked top-to-bottom in a column on the right,
   with room above each for the WAN approach line */
.infra-branches { flex-direction: column; align-items: flex-start; gap: 4rem; margin-left: 1.6rem; }
.infra-body { align-items: flex-start; gap: 4rem; }
.infra-wrap { gap: 5rem; }

/* pull the branch column left, closer to Riyadh (keeps ~26px for the WAN bus) */
.infra-body { gap: 2rem; }
.infra-branches { margin-left: 1rem; }

/* more separation between the HQ box and the branch column (the WAN bus runs between them) */
.infra-body { gap: 4rem; }
.infra-branches { margin-left: 1.6rem; }

/* Branches are secondary: no Nutanix box (their hardware sits in Network devices),
   and a smaller type/box scale than HQ */
.infra-branch { padding: 0.6rem; }
.infra-branch .infra-site-head { font-size: 0.9rem; margin-bottom: 0.5rem; }
.infra-branch .infra-badge { font-size: 0.6rem; padding: 1px 6px; }
.infra-branch .infra-site-body { gap: 1rem; }
.infra-branch .infra-box { padding: 0.45rem 0.5rem; }
.infra-branch .infra-box h4 { font-size: 0.76rem; margin-bottom: 0.35rem; }
.infra-branch .infra-box h4 small { font-size: 0.6rem; }
.infra-branch .infra-chip { font-size: 0.68rem; padding: 0.2rem 0.35rem; gap: 0.3rem; }
.infra-branch .infra-chip small { font-size: 0.58rem; }
.infra-branch .infra-chip .infra-ico svg { width: 12px; height: 12px; }
.infra-branch .infra-box h4 .infra-ico svg { width: 13px; height: 13px; }
.infra-branch .infra-netbox { max-width: 165px; }
.infra-branch .infra-appsbox { max-width: 150px; }

/* site network-connectivity graph (drill-down) */
.nf-graph { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 3rem; padding: 1.2rem 0.5rem; min-width: max-content; }
.nf-edges { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
.nf-row { display: flex; gap: 3rem; justify-content: center; position: relative; z-index: 1; }
.nf-node { background: #0b1220; min-width: 130px; }
.nf-away { opacity: 0.9; border-style: dashed; }

/* drill-down: main-view site boxes, each holding its detailed device chain */
.nf2-wrap { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4rem; min-width: max-content; padding: 1rem 0.5rem 2rem; }
.nf2-top { display: flex; gap: 2.5rem; align-items: center; position: relative; z-index: 3; }
.nf2-body { display: flex; align-items: flex-start; gap: 4rem; }
.nf2-chain { display: flex; flex-direction: column; gap: 2.6rem; }
.nf2-row { display: flex; gap: 2.2rem; justify-content: center; }
.nf2-wrap .nf-node { position: relative; z-index: 3; background: #0b1220; min-width: 135px; }
.nf2-wrap .infra-site { z-index: auto; }
.nf2-wrap .nf-edges { z-index: 2; }
.nf2-wrap .infra-site-head { position: relative; z-index: 3; flex-wrap: wrap; }
.nf2-wrap .infra-branches { flex-direction: column; gap: 3rem; margin-left: 1.6rem; }
.nf2-wrap .infra-site-head .topo-code { font-weight: 400; }

/* External users sit next to the Internet on the main view (published services) */
.infra-top { display: flex; align-items: center; gap: 3rem; position: relative; z-index: 3; }
.infra-extusr { align-self: center; }
.infra-extusr h4 { margin: 0; }

/* Internet centred over the diagram; External Users off to its right.
   The 1fr side columns are what keep the Internet truly centred. */
.infra-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 0; width: 100%; }
.infra-top .infra-inet { grid-column: 2; justify-self: center; }
.infra-top .infra-extusr { grid-column: 3; justify-self: start; margin-left: 3rem; }

/* WAN labels (public IP / VPN / Dynamic + link IPs) - larger and more legible */
.infra-edge-lbl { font-size: 0.95rem; font-weight: 600; fill: #cbd5e1; }

/* top bar: Change password / Log out match the nav tab size and stop wrapping mid-word */
.topbar .link { font-size: 1.15rem; white-space: nowrap; }
.topbar #whoami { white-space: nowrap; }

/* filter controls (Env: any, Location: any, ...) - readable size on VMs + Network */
.filters select, .filters button, .filters input[type="search"] { font-size: 1rem; padding: 0.5rem 0.7rem; }
.filters .chk, .filters .muted, #vm-count, #net-count { font-size: 0.95rem; }

/* drill-down: node text was smaller than the IP labels - balance box + font sizes */
.nf2-wrap .nf-node { min-width: 168px; font-size: 0.95rem; padding: 0.45rem 0.6rem; gap: 0.5rem; }
.nf2-wrap .nf-node small { font-size: 0.78rem; }
.nf2-wrap .nf-node .infra-ico svg { width: 18px; height: 18px; }
.nf2-wrap .infra-site-head { font-size: 1.15rem; }
.nf2-wrap .infra-branch .infra-site-head { font-size: 1.05rem; }
.nf2-wrap .nf2-row { gap: 3rem; }
.nf2-wrap .nf2-chain { gap: 3.2rem; }

/* ================= Infrastructure view: zoned layout with appliance icons ========= */
.infra-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; width: 100%; }
.infra-top .infra-inet { grid-column: 2; justify-self: center; display: inline-flex;
  align-items: center; gap: 0.6rem; font-weight: 700; }
.infra-top .infra-extusr { grid-column: 3; justify-self: start; margin-left: 4rem; }
.infra-hq { padding: 1.1rem 1.3rem 1.3rem; }
.infra-hq .infra-site-head { font-size: 1.35rem; gap: 0.6rem; }
.infra-branch .infra-site-head { font-size: 1.05rem; gap: 0.5rem; }
.infra-badge.br { background: rgba(245,158,11,0.18); color: #f59e0b; }

/* a rack-style device row */
.idev { display: flex; align-items: center; gap: 0.6rem; border: 1.5px solid var(--dc, var(--line));
  border-radius: 9px; padding: 0.4rem 0.6rem; background: #0b1220; color: var(--dc, var(--txt));
  position: relative; z-index: 3; }
.idev + .idev { margin-top: 0.5rem; }
.idev-ico { display: inline-flex; flex-shrink: 0; }
.idev-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.idev-txt b { font-size: 0.9rem; white-space: nowrap; }
.idev-txt small { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.idev-usr { --dc: #38bdf8; }

/* zone containers */
.izone { border: 1.6px solid var(--line); border-radius: 12px; padding: 0.75rem;
  position: relative; z-index: 2; background: rgba(255,255,255,0.012); }
.izone-h { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 0.6rem; }
.izone-h small { font-weight: 400; color: var(--muted); font-size: 0.7rem; margin-left: 0.35rem; }
.izone-dmz  { border-color: #ef4444; } .izone-dmz  .izone-h { color: #ef4444; }
.izone-core { border-color: #eab308; } .izone-core .izone-h { color: #eab308; }
.izone-dc   { border-color: #a855f7; } .izone-dc   .izone-h { color: #a855f7; }
.izone-ntx  { border-color: #22c55e; margin-top: 0.8rem; } .izone-ntx .izone-h { color: #22c55e; }

.hq-perim { display: flex; justify-content: center; margin-bottom: 2.2rem; position: relative; z-index: 3; }
.hq-perim .idev { min-width: 260px; }
.hq-mid { display: flex; align-items: flex-start; justify-content: center;
  gap: 3.2rem; margin-bottom: 2.2rem; }
.izone-dc { margin: 0 auto; max-width: 760px; }

/* Nutanix cluster + application VMs */
.ntx-body { display: flex; align-items: flex-start; gap: 1.2rem; }
.ntx-nodes { display: flex; flex-direction: column; gap: 0.4rem; }
.ntx-node { display: flex; align-items: center; gap: 0.45rem; border: 1.4px solid #22c55e;
  border-radius: 7px; padding: 0.25rem 0.5rem; font-size: 0.78rem; color: #22c55e; background: #0b1220; }
.ntx-apps { flex: 1; min-width: 0; }
.ntx-apps-h { font-size: 0.78rem; color: #f59e0b; font-weight: 600; margin: 0.5rem 0 0; text-align: center; }
.flow-dot { filter: drop-shadow(0 0 3px rgba(255,255,255,0.55)); }
.ntx-apps-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ntx-app { border: 1.5px solid #14b8a6; border-radius: 9px; padding: 0.45rem 0.55rem;
  text-align: center; min-width: 84px; background: #0b1220; }
.ntx-app-n { font-size: 0.8rem; font-weight: 700; color: #14b8a6; white-space: nowrap; }
.ntx-app-ico { display: block; color: #14b8a6; margin: 0.25rem 0 0.15rem; }
.ntx-app-c { font-size: 0.68rem; color: var(--muted); }
.ntx-app-lite { border: 1.3px solid #14b8a6; border-radius: 6px; padding: 0.15rem 0.4rem;
  font-size: 0.72rem; color: #14b8a6; }
.ntx-app-lite small { color: var(--muted); }

/* branch: users - switch - firewall in one row */
.br-chain { display: flex; align-items: center; gap: 1.6rem; position: relative; z-index: 3; }
.br-chain .idev { margin-top: 0 !important; }
.br-apps { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.infra-swatch.dashed { border-style: dashed; }

/* ---- match the reference drawing: uniform type scale + compact device rows ---- */
/* room for the WAN / subnet labels between HQ and the branch column */
.infra-branches { margin-left: 9rem; gap: 2.6rem; }
.infra-body { gap: 0; }
/* device rows size to their content and centre, instead of stretching the zone */
.izone { display: flex; flex-direction: column; align-items: center; }
.izone-h { align-self: flex-start; }
.izone .idev { align-self: center; min-width: 240px; }
.izone-dc > .idev { min-width: 260px; }
.izone-ntx { align-self: stretch; }
.hq-mid { align-items: stretch; }
.izone-dmz, .izone-core { min-width: 250px; }

/* one consistent type scale across the whole diagram (mirrors the drawing) */
.infra-site-head        { font-size: 1.25rem !important; }
.infra-hq .infra-site-head { font-size: 1.45rem !important; }
.izone-h                { font-size: 0.95rem; }
.izone-h small          { font-size: 0.78rem; }
.idev-txt b             { font-size: 0.95rem; }
.idev-txt small         { font-size: 0.8rem; }
.ntx-node               { font-size: 0.85rem; }
.ntx-apps-h             { font-size: 0.88rem; }
.ntx-app-n              { font-size: 0.88rem; }
.ntx-app-c              { font-size: 0.78rem; }
.infra-inet             { font-size: 1.05rem; }
.infra-users h4         { font-size: 1rem; }
.infra-users h4 small   { font-size: 0.8rem; }
.infra-edge-lbl         { font-size: 0.92rem; font-weight: 600; fill: #cbd5e1; }
.infra-leg              { font-size: 0.9rem; }
.infra-badge            { font-size: 0.72rem; }
.ntx-app                { min-width: 96px; }

/* operator-supplied vendor artwork */
.vendor-ico { width: 62px; height: 26px; object-fit: contain; object-position: left center; display: block; }
.idev .vendor-ico { width: 66px; height: 28px; }
.idev-ico:has(.vendor-ico) { min-width: 66px; }
.vi-prev { width: 34px; height: 20px; object-fit: contain; vertical-align: middle;
  margin-right: 0.5rem; background: #0b1220; border-radius: 3px; }
#vi-file { padding: 0.35rem; font-size: 0.85rem; }
/* vendor artwork inside the smaller cluster-node chips */
.ntx-node .vendor-ico { width: 54px; height: 18px; }

/* ---- component artwork lifted from the reference diagram ---- */
.comp-ico { object-fit: contain; display: inline-block; vertical-align: middle; }
.ci-site  { width: 30px; height: 30px; }
.ci-inet  { width: 46px; height: 34px; }
.ci-usr   { width: 40px; height: 32px; }
.ci-vm    { width: 26px; height: 26px; }
.ci-ntx   { width: 22px; height: 24px; margin-right: 2px; }
.infra-hq .ci-site { width: 36px; height: 36px; }

/* ---- larger device rows + boxes, closer to the reference ---- */
.idev { padding: 0.6rem 0.85rem; border-radius: 11px; border-width: 2px; gap: 0.75rem; }
.idev + .idev { margin-top: 0.7rem; }
.idev-txt b     { font-size: 1.05rem; }
.idev-txt small { font-size: 0.85rem; }
.vendor-ico          { width: 78px; height: 32px; }
.idev .vendor-ico    { width: 84px; height: 34px; }
.idev-ico:has(.vendor-ico) { min-width: 84px; }
.izone .idev         { min-width: 300px; }
.izone-dc > .idev    { min-width: 330px; }
.hq-perim .idev      { min-width: 330px; }
.izone-dmz, .izone-core { min-width: 320px; }
.izone { padding: 0.95rem; border-radius: 14px; }
.br-chain { gap: 1.5rem; }
.br-chain .idev { min-width: 0; }
.ntx-node { padding: 0.35rem 0.6rem; font-size: 0.9rem; }
.ntx-node .vendor-ico { width: 64px; height: 22px; }
.ntx-app { min-width: 108px; padding: 0.55rem 0.6rem; }
.ntx-app-n { font-size: 0.95rem; }
.ntx-app-c { font-size: 0.82rem; }
.infra-box.infra-users { padding: 0.75rem 0.9rem; }

/* ---- match the reference: only the perimeter FW and core switch are boxed.
   DMZ / DC / branch devices are bare icon + label on the zone background. ---- */
.izone-dmz .idev,
.izone-dc  > .idev,
.br-chain  .idev {
  border: none; background: none; padding: 0.35rem 0.2rem; border-radius: 0;
}
.izone-dmz .idev + .idev,
.izone-dc  > .idev + .idev { margin-top: 1.1rem; }
/* the two that ARE boxed in the drawing keep their frame */
.hq-perim .idev   { border: 2px solid var(--dc, var(--line)); background: #0b1220; }
.izone-core .idev { border: 2px solid var(--dc, var(--line)); background: #0b1220; }
/* stack icon above label like the drawing, for the bare ones */
.izone-dmz .idev, .izone-dc > .idev {
  flex-direction: column; align-items: center; text-align: center; gap: 0.4rem;
}
.izone-dmz .idev .idev-txt, .izone-dc > .idev .idev-txt { align-items: center; }
.br-chain .idev { flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; }
.br-chain .idev .idev-txt { align-items: center; }
.izone-dmz .vendor-ico, .izone-dc > .idev .vendor-ico { width: 104px; height: 40px; }
.br-chain .vendor-ico { width: 92px; height: 34px; }
.izone-dmz .idev-ico:has(.vendor-ico), .izone-dc > .idev .idev-ico:has(.vendor-ico) { min-width: 0; }
.br-chain .idev-ico:has(.vendor-ico) { min-width: 0; }

/* ---- reference-matched label sizes ---- */
.idev-txt b     { font-size: 1.12rem; line-height: 1.25; }
.idev-txt small { font-size: 0.88rem; opacity: 0.85; }
.izone-dmz .idev-txt b, .izone-dc > .idev-txt b { font-size: 1.15rem; }
.izone-h        { font-size: 1.08rem; }
.izone-h small  { font-size: 0.85rem; }
.ntx-apps-h     { font-size: 1rem; }
.ntx-app-n      { font-size: 1rem; }
.ntx-app-c      { font-size: 0.85rem; }
.ntx-node       { font-size: 0.95rem; }
.infra-inet     { font-size: 1.2rem; }
.infra-users h4 { font-size: 1.12rem; }
.infra-users h4 small { font-size: 0.88rem; }
.infra-site-head       { font-size: 1.4rem !important; }
.infra-hq .infra-site-head { font-size: 1.6rem !important; }
.infra-edge-lbl { font-size: 1rem; font-weight: 700; }
.infra-badge    { font-size: 0.78rem; }
.br-chain .idev-txt b { font-size: 1.05rem; }
.br-chain .idev-txt small { font-size: 0.82rem; }

/* ---- appliance graphics from the drawing: no frame, smaller, icon above label ---- */
.izone-core .idev { border: none !important; background: none !important; padding: 0.3rem; }
.hq-perim  .idev  { border: none !important; background: none !important; padding: 0.3rem; }
.hq-perim .idev, .izone-core .idev {
  flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; min-width: 0;
}
.hq-perim .idev .idev-txt, .izone-core .idev .idev-txt { align-items: center; }
/* appliance artwork sizing - reduced */
.vendor-ico, .idev .vendor-ico { width: 150px; height: auto; max-height: 56px; }
.hq-perim .vendor-ico   { width: 190px; max-height: 74px; }
.izone-core .vendor-ico { width: 210px; max-height: 62px; }
.izone-dmz  .vendor-ico { width: 168px; max-height: 42px; }
.izone-dc > .idev .vendor-ico { width: 140px; max-height: 42px; }
.br-chain .vendor-ico   { width: 96px;  max-height: 32px; }
.ntx-node .vendor-ico   { width: 64px;  max-height: 20px; }
.idev-ico:has(.vendor-ico) { min-width: 0 !important; }
/* smaller labels to match */
.idev-txt b     { font-size: 0.98rem; }
.idev-txt small { font-size: 0.8rem; }
/* tighter zones + main box */
.izone { padding: 0.85rem; }
.izone-dmz, .izone-core { min-width: 250px; }
.izone .idev, .izone-dc > .idev, .hq-perim .idev { min-width: 0; }
.hq-mid { gap: 2.4rem; margin-bottom: 2.4rem; }
.hq-perim { margin-bottom: 2.4rem; }
.izone-dc { max-width: 700px; }
.infra-hq { padding: 1rem 1.1rem 1.2rem; }

/* ---- HQ: DMZ | (Core over DC) | Internal Users ---- */
.hq-center { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; }
.hq-mid { align-items: flex-start; gap: 2.8rem; margin-bottom: 0; }
.izone-dc { margin: 0; max-width: none; }
/* core zone: no header text, sized to the switch */
.izone-core { min-width: 0; padding: 0.7rem 0.9rem; }
.izone-core .izone-h { display: none; }
/* the core switch keeps no secondary HA-name line */
.izone-core .idev-txt small { display: none; }
/* Palo Alto is boxed again */
.hq-perim .idev {
  border: 2px solid var(--dc, var(--line)) !important; background: #0b1220 !important;
  padding: 0.7rem 1rem; border-radius: 12px;
}
/* devices a little bigger */
.vendor-ico, .idev .vendor-ico { width: 176px; max-height: 64px; }
.hq-perim  .vendor-ico  { width: 215px; max-height: 84px; }
.izone-core .vendor-ico { width: 245px; max-height: 74px; }
.izone-dmz  .vendor-ico { width: 196px; max-height: 50px; }
.izone-dc > .idev .vendor-ico { width: 168px; max-height: 50px; }
.br-chain  .vendor-ico  { width: 108px; max-height: 36px; }
.idev-txt b     { font-size: 1.06rem; }
.idev-txt small { font-size: 0.84rem; }
/* Riyadh box: wider, and shifted right */
.infra-body { padding-left: 3.5rem; }
.infra-hq { padding: 1.1rem 2.6rem 1.4rem 1.6rem; }

/* DC zone must stay bounded or the Application-VM row runs the whole page wide */
.izone-dc { max-width: 720px; }
.ntx-apps-row { flex-wrap: wrap; }
.hq-center { max-width: 740px; }
.infra-hq { padding: 1.1rem 1.8rem 1.4rem 1.4rem; }
.infra-body { padding-left: 2rem; }

/* Nutanix cluster: stacked node appliances (no names), as drawn */
.ntx-nodes { gap: 0.55rem; }
.ntx-node { justify-content: center; padding: 0.3rem 0.5rem; border-color: #22c55e; }
.ntx-node .vendor-ico { width: 96px; max-height: 26px; }

/* keep the branch column on-screen: tighter gutter + narrower branch devices */
.infra-branches { margin-left: 8.5rem; }
.infra-body { gap: 2rem; padding-left: 1rem; }
.br-chain { gap: 1.1rem; }
.br-chain .vendor-ico { width: 88px; max-height: 30px; }
.br-chain .idev-txt b { font-size: 0.92rem; white-space: normal; }
.br-chain .idev-txt small { font-size: 0.76rem; }
.infra-branch { padding: 0.7rem 0.9rem; }

/* Internal Users sits beside the stacked core switch */
.hq-corerow { display: flex; align-items: center; gap: 2rem; }
.hq-center { align-items: flex-start; max-width: none; }
.hq-center > .izone-dc { align-self: flex-start; }

/* keep the whole diagram inside the viewport */
.izone-dc { max-width: 660px; }
.infra-branch .idev-txt b { font-size: 0.88rem; }
.br-chain .vendor-ico { width: 76px; max-height: 26px; }
.br-chain { gap: 0.9rem; }
.infra-branch { padding: 0.6rem 0.8rem; }
.infra-branches { margin-left: 8.5rem; }

/* Users: own column, pinned level with the stacked core switch; DC stays centred on core */
.hq-corerow { display: contents; }
.hq-center { align-items: center; }
.hq-mid { align-items: flex-start; }
.hq-users { align-self: flex-start; margin-top: 1.6rem; }

/* level Users with the core switch, and trim the diagram back inside the viewport */
.hq-users { margin-top: 0; align-self: flex-start; }
.izone-core { align-self: center; }
.izone-dc { max-width: 600px; }
.infra-branches { margin-left: 7.5rem; }
.hq-mid { gap: 2.2rem; }
.ntx-app { min-width: 96px; }

/* an earlier `.infra-hq .infra-users{align-self:center}` was winning - override it */
.infra-hq .hq-users { align-self: flex-start !important; margin-top: 0.5rem; }
.infra-branches { margin-left: 7rem; }
.izone-dc { max-width: 575px; }

/* the Nutanix node artwork already carries its own frame - don't box it again */
.ntx-node { border: none !important; background: none !important; padding: 0 !important; }
.ntx-node .vendor-ico { width: 118px; max-height: 32px; }
.ntx-nodes { gap: 0.7rem; }

/* larger Nutanix node appliances */
.ntx-node .vendor-ico { width: 168px; max-height: 46px; }
.ntx-nodes { gap: 0.85rem; }
.izone-ntx .ntx-body { gap: 1.6rem; }

/* an early `.vendor-ico{height:26px}` was squashing these - let height follow the artwork */
.vendor-ico, .idev .vendor-ico, .ntx-node .vendor-ico { height: auto; }
.ntx-node .vendor-ico { width: 190px; max-height: 70px; }
.ntx-nodes { gap: 0.9rem; }

/* "N Nutanix Cluster" sits between the node devices and the application VMs */
.ntx-label { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; flex-shrink: 0; text-align: center; }
.ntx-label .ci-ntx { width: 30px; height: 32px; margin: 0; }
.ntx-label-t { color: #22c55e; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.ntx-label small { color: var(--muted); font-size: 0.72rem; }
.izone-ntx > .izone-h { display: none; }
.ntx-body { align-items: center; gap: 1.3rem; }

/* devices a little smaller again */
.hq-perim  .vendor-ico  { width: 190px; max-height: 74px; }
.izone-core .vendor-ico { width: 215px; max-height: 58px; }
.izone-dmz  .vendor-ico { width: 172px; max-height: 44px; }
.izone-dc > .idev .vendor-ico { width: 146px; max-height: 44px; }
.ntx-node  .vendor-ico  { width: 158px; max-height: 58px; }
.idev-txt b     { font-size: 1rem; }
.idev-txt small { font-size: 0.8rem; }

/* DC Network box extends further right; claw the width back from the branch gutter */
.izone-dc { max-width: 745px; }
.hq-center { align-items: flex-start; }
.izone-core { align-self: center; }
.infra-branches { margin-left: 6.5rem; }
.infra-body { gap: 1.4rem; padding-left: 0.5rem; }

/* Nutanix nodes + label pinned to the top of the cluster box */
.ntx-body { align-items: center; }   /* nodes stay level with the apps row as it grows */
.ntx-label { justify-content: flex-start; padding-top: 0.2rem; }

/* each application shows a boxed VM, as drawn */
.ntx-vmbox { border: 1.5px solid #14b8a6; border-radius: 7px; padding: 0.3rem 0.45rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  margin-top: 0.35rem; background: #0b1220; }
.ntx-app-ico { margin: 0; }
.ntx-app-c { font-size: 0.78rem; color: #14b8a6; }
.ntx-app { padding: 0.5rem 0.55rem; }

/* Internal Users: match the device-row scale and sit tight to the core switch */
.hq-users { padding: 0.6rem 0.9rem; }
.hq-users h4 { margin: 0; font-size: 1rem; }
.hq-users .ci-usr { width: 34px; height: 28px; }
.infra-hq .hq-users { margin-top: 0.9rem; }

/* Internal Users pinned beside the core switch (absolute: keeps DC centred under core) */
.izone-core { position: relative; overflow: visible; }
.infra-hq .hq-users {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin: 0 0 0 2.2rem !important; align-self: auto !important; white-space: nowrap;
}
.hq-mid { gap: 2.4rem; }

/* the N Nutanix Cluster label sits about level with the 2nd node */
.ntx-label { padding-top: 5.6rem; }

/* dotted frame around all the application VMs, in the Nutanix colour */
.ntx-apps-frame {
  border: 2px dashed #22c55e; border-radius: 12px; padding: 0.75rem;
  background: rgba(34,197,94,0.03);
}
/* drop the N label to sit level with the end of the 2nd Nutanix node */
.ntx-label { padding-top: 11.4rem; }
/* padding kept the box in place; margin actually moves it down beside node 2 */
.ntx-label { padding-top: 0; margin-top: -16px; }   /* the flow line passes through the N / text gap */

/* drop the grey HA-name line under the HQ devices (core switch already hidden) */
.hq-perim  .idev-txt small,
.izone-dmz .idev-txt small,
.izone-dc > .idev .idev-txt small { display: none; }

/* artwork was pinned left inside its box, so the narrow Cisco DC switch looked
   off-centre against the wider FortiGate - centre the image within the box */
.izone-dc > .idev .vendor-ico,
.izone-dmz .idev .vendor-ico,
.hq-perim .vendor-ico,
.izone-core .vendor-ico { object-position: center; }

/* larger zone titles */
.izone-h { font-size: 1.35rem; letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.izone-ntx .ntx-apps-h { font-size: 1.3rem; }

/* perimeter firewall: its own colour (teal), so it no longer matches the red DMZ box */
.hq-perim .idev { border-color: #2dd4bf !important; }
.hq-perim .idev .idev-txt b { color: #2dd4bf; }

/* perimeter firewall: white/silver - the only clearly unused key in the palette
   (red=DMZ, gold=core, purple=DC, green=Nutanix, teal=apps, sky=users,
    orange=WAN, pink=WAN link, blue=site box) */
.hq-perim .idev { border-color: #e2e8f0 !important; }
.hq-perim .idev .idev-txt b { color: #ffffff; }

/* DC devices: name to the RIGHT of the appliance, and sitting a little higher */
.izone-dc > .idev {
  flex-direction: row !important; align-items: center; gap: 0.9rem; text-align: left;
}
.izone-dc > .idev .idev-txt { align-items: flex-start !important; text-align: left; }
.izone-dc > .idev:first-of-type { margin-top: -0.4rem; }
.izone-dc > .idev + .idev { margin-top: 0.7rem; }
.izone-dc > .izone-h { margin-bottom: 0.4rem; }

/* DC devices sit toward the right of the DC Network box */
.izone-dc > .idev { align-self: flex-end !important; margin-right: 5.5rem; }

/* DC devices: name back UNDER the appliance (as before), still positioned right */
.izone-dc > .idev {
  flex-direction: column !important; align-items: center !important; text-align: center;
  gap: 0.4rem;
}
.izone-dc > .idev .idev-txt { align-items: center !important; text-align: center; }
.izone-dc > .idev + .idev { margin-top: 1rem; }

/* DC devices back to centred (as before the right-shift), and larger */
.izone-dc > .idev { align-self: center !important; margin-right: 0; }
.izone-dc > .idev .vendor-ico { width: 200px; max-height: 62px; }
.izone-dc > .idev .idev-txt b { font-size: 1.08rem; }

/* device names in grey (perimeter, DMZ pair, DC pair) */
.hq-perim .idev .idev-txt b,
.izone-dmz .idev .idev-txt b,
.izone-dc > .idev .idev-txt b { color: #cbd5e1 !important; }

/* larger "N Nutanix Cluster" label */
.ntx-label-t { font-size: 1.4rem; }
.ntx-label .ci-ntx { width: 40px; height: 42px; }

/* larger device names for the perimeter, DMZ pair and core switch */
.hq-perim  .idev .idev-txt b,
.izone-dmz .idev .idev-txt b,
.izone-core .idev .idev-txt b { font-size: 1.28rem; }

/* bigger user icons everywhere (internal, external, branch) */
.ci-usr            { width: 56px; height: 44px; }
.hq-users .ci-usr  { width: 52px; height: 42px; }
.infra-extusr .ci-usr { width: 56px; height: 44px; }
.br-chain .idev-usr .ci-usr { width: 52px; height: 42px; }
.infra-hd { gap: 0.6rem; }

/* bigger Internet cloud */
.ci-inet { width: 76px; height: 56px; }
.infra-inet { font-size: 1.35rem; padding: 0.8rem 2rem; gap: 0.9rem; }

/* wider gutter so the WAN bus + its labels clear the HQ box */
.infra-branches { margin-left: 12rem; }

/* bigger public IP / VPN / subnet labels */
.infra-edge-lbl { font-size: 1.18rem; font-weight: 700; fill: #e2e8f0; }

/* claw the width back so the branches stay on screen with the wider gutter */
.infra-branches { margin-left: 10rem; }
.br-chain { gap: 0.7rem; }
.br-chain .vendor-ico { width: 66px; max-height: 24px; }
.br-chain .idev-usr .ci-usr { width: 44px; height: 36px; }
.infra-branch .idev-txt b { font-size: 0.84rem; }
.infra-branch .idev-txt small { font-size: 0.72rem; }
.infra-branch { padding: 0.55rem 0.7rem; }
.infra-branch .infra-site-head { font-size: 1.2rem !important; }
/* wider gutter so the larger WAN labels clear both HQ and the branch boxes */
.infra-branches { margin-left: 11.5rem; }
.br-chain .vendor-ico { width: 60px; max-height: 22px; }
.infra-branch .idev-txt b { font-size: 0.8rem; }

/* larger site names, coloured to their role: HQ blue, branches amber */
.infra-site-head           { font-size: 1.75rem !important; letter-spacing: 0.01em; }
.infra-hq .infra-site-head { font-size: 2.05rem !important; color: #3b82f6; }
.infra-branch .infra-site-head { font-size: 1.6rem !important; color: #f59e0b; }
.infra-hq .ci-site     { width: 46px; height: 46px; }
.infra-branch .ci-site { width: 36px; height: 36px; }

/* branches: no grey secondary line, device names in white */
.infra-branch .idev-txt small { display: none; }
.infra-branch .idev .idev-txt b { color: #ffffff !important; }

/* branches: identical box size, larger devices */
.infra-branch { width: 560px; padding: 0.8rem 1rem; }
.br-chain { gap: 1.4rem; justify-content: flex-start; }
.br-chain .vendor-ico { width: 104px; max-height: 38px; }
.br-chain .idev-usr .ci-usr { width: 58px; height: 46px; }
.infra-branch .idev-txt b { font-size: 1rem; }
.br-chain .idev { min-width: 132px; }
/* keep the equal-width branch boxes fully on screen */
.infra-branch { width: 500px; }
.br-chain { gap: 1rem; }
.br-chain .vendor-ico { width: 92px; max-height: 34px; }
.br-chain .idev { min-width: 118px; }
.infra-branches { margin-left: 10.5rem; }
/* the branch Palo Alto / Meraki graphics are taller (logo + appliance) - give them room */
.br-chain .vendor-ico { width: 108px; max-height: 60px; }
.br-chain .idev { min-width: 126px; }
.br-chain { gap: 0.85rem; }
/* wider spacing so the branch connector lines are clearly visible, not stubs */
.br-chain { gap: 2.6rem; }
.br-chain .idev { min-width: 104px; }
.br-chain .vendor-ico { width: 96px; max-height: 54px; }
.infra-branch { width: 540px; }
.infra-branches { margin-left: 9.5rem; }

/* branch devices larger; firewall shows artwork only */
.br-chain .vendor-ico { width: 132px; max-height: 76px; }
.br-chain .idev-usr .ci-usr { width: 68px; height: 54px; }
.br-chain .idev { min-width: 124px; }
.br-chain { gap: 2.2rem; }
.infra-branch { width: 560px; }
.infra-branch .idev-txt b { font-size: 1.05rem; }
.idev-nolabel .idev-txt { display: none; }
.infra-branches { margin-left: 9rem; }
/* keep the enlarged branches on screen */
.infra-branch { width: 530px; }
.br-chain { gap: 1.8rem; }
.infra-branches { margin-left: 8.5rem; }

/* main page heading */
#tab-infra .exec-head h3 { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.01em; }
/* the built-in cloud glyph for the Internet node */
.infra-inet .infra-ico svg, .infra-inet svg { width: 54px; height: 34px; }

/* branch chain: icons on one baseline so the connector lines run level and clear */
.br-chain { align-items: center; gap: 2.4rem; }
.br-chain .idev { justify-content: flex-start; }
.br-chain .idev-nolabel { padding-bottom: 1.75rem; }   /* match the captioned devices */
/* branch applications sit below the switch */
.br-apps { justify-content: center; margin-top: 0.9rem; }
.infra-branch { width: 545px; }

/* perimeter firewall box in orange */
.hq-perim .idev { border-color: #f97316 !important; }
.hq-perim .idev .idev-txt b { color: #f97316; }
/* tighter branch spacing so each link clearly joins its two devices */
.br-chain { gap: 1.5rem; }
/* a bit more room so each branch link reads as a proper connector */
.br-chain { gap: 2.4rem; }
.infra-branch { width: 560px; }
.infra-branches { margin-left: 8rem; }

/* page heading: emblem + brand, in the logo's green */
#tab-infra .exec-head h3 { color: #4ade80; display: flex; align-items: center; gap: 0.7rem; }
.ci-title { width: 46px; height: 46px; object-fit: contain; }
/* RIYADH takes the same logo green */
.infra-hq .infra-site-head { color: #4ade80; }
/* larger DC Network title */
.izone-dc > .izone-h { font-size: 1.7rem; }
/* clickable zones shouldn't wash out on hover - keep the tint subtle */
.izone.infra-click:hover { background: rgba(255,255,255,0.03); }
.br-chain.infra-click:hover { background: rgba(255,255,255,0.03); border-radius: 10px; }
/* drill-down boxes: applications as a wrapped grid of small chips, not one per line */
.infra-clbox { max-width: 640px; }
.infra-clbox .infra-chips { flex-direction: row; flex-wrap: wrap; gap: 0.55rem; }
.infra-clbox .infra-chip { padding: 0.35rem 0.6rem; }

/* ---------- Nutanix rack diagram (cluster drill-down) ---------- */
.infra-racks { display: flex; flex-wrap: nowrap; gap: 300px; align-items: flex-start; overflow-x: auto; }
.rack-group { display: flex; flex-direction: column; position: relative; }
.rack-name { font-size: 1.7rem; font-weight: 700; color: #cfe0f5;
  letter-spacing: 0.04em; margin-bottom: 0.45rem; }
.rack-body { display: flex; gap: 0; align-items: flex-start; position: relative; }
.rack { border: 3px solid #3a465e; border-radius: 8px; background: #0a0f1a;
  padding: 5px; box-shadow: inset 0 0 0 2px #05080f; position: relative; z-index: 1; }
.rack-units { display: flex; flex-direction: column; width: 230px; }   /* rack = 246px incl. border+pad */
.ru { height: 30px; display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid #161e2e; padding: 0; font-size: 0.72rem; }
/* every rack unit is the same height so both racks are equal, top to bottom */
.ru:last-child { border-bottom: 0; }
.ru-n { width: 20px; color: #4b566b; text-align: right; padding-right: 4px;
  flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ru-node .ru-n { display: none; }              /* device fills the whole 1U, no side gaps */
.ru-dev { flex: 1; height: 100%; padding: 0; }
/* a plain 1U node cover / bezel with the Nutanix logo centred on top */
.ntx-cover { display: flex; align-items: center; justify-content: center; height: 100%;
  border-radius: 3px; background: linear-gradient(180deg, #2b3c59, #1a2740);
  border: 1px solid #3c5178; box-shadow: inset 0 1px 0 #43608c, inset 0 0 0 1px #0e1830; }
.ntx-cover img { height: 24px; width: auto; }
/* app boxes are positioned by JS beside each cluster's anchor rack unit */
.rack-apps-wrap { margin-left: 72px; position: relative; width: 780px; }
.rack-cl { position: absolute; left: 0; width: 100%; z-index: 1; }
.rack-apps-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.45rem; }
.rack-apps-title .infra-hd { display: inline-flex; align-items: center; gap: 0.5rem; }
.rack-apps-title img { height: 22px; width: auto; }
.rack-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.rack-apps { border: 2px dashed #14b8a6; border-radius: 12px; padding: 0.9rem 1.1rem;
  background: rgba(20,184,166,0.05); min-width: 340px; max-width: 780px; }
.rack-apps .infra-chips { flex-direction: row; flex-wrap: wrap; gap: 0.65rem; }
.rack-apps .infra-chip { padding: 0.45rem 0.7rem; font-size: 0.95rem; }

/* Infrastructure options: rack-placement form wraps cleanly instead of congesting */
.rk-form { margin-top: 0.7rem; }
.rk-form-lbl { display: block; margin-bottom: 0.45rem; font-weight: 600; }
.rk-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rk-fields #infra-rk-cluster { flex: 1 1 150px; min-width: 130px; }
.rk-fields input[type="number"] { flex: 0 0 auto; width: 6.5rem; }
.rk-fields button { flex: 0 0 auto; }
/* rack drill-down application boxes: name only, no VM count */
.rack-apps .infra-chip small { display: none; }