/* network-designer.css (v3.6.0) */
body.nd-lock{ overflow:hidden; }
.nd-overlay{ position:fixed; inset:0; z-index:120; display:none; flex-direction:column; background:var(--bg-0); color:var(--text-hi); font-family:var(--font-ui); font-size:13px; }
.nd-overlay.open{ display:flex; }
.nd-overlay button, .nd-overlay select, .nd-overlay input, .nd-overlay textarea{ font-family:inherit; font-size:12.5px; }
.nd-top{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding:8px 12px; background:var(--bg-1); border-bottom:1px solid var(--line); }
.nd-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.nd-brand b{ font-family:var(--font-display); font-size:14px; white-space:nowrap; }
.nd-brand #ndTitle{ color:var(--text-mid); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nd-dirty{ font-size:11px; padding:2px 8px; border-radius:10px; background:var(--bg-2); color:var(--text-lo); white-space:nowrap; }
.nd-dirty.on{ background:var(--warn-dim); color:var(--warn); }
.nd-grp{ display:flex; align-items:center; gap:4px; padding-right:10px; border-right:1px solid var(--line-soft); }
.nd-grp.right{ margin-left:auto; border-right:0; padding-right:0; }
.nd-top button, .nd-dlg button, .nd-right button, .nd-left button{ padding:6px 10px; border-radius:7px; border:1px solid var(--line); background:var(--bg-2); color:var(--text-mid); cursor:pointer; }
.nd-top button:hover, .nd-dlg button:hover, .nd-right button:hover{ color:var(--text-hi); border-color:var(--line-bright); }
.nd-top button.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.nd-overlay button.primary{ background:var(--ok-dim); border-color:#2a4a3a; color:var(--ok); font-weight:600; }
.nd-overlay button.danger{ color:var(--down); }
.nd-top button:disabled{ opacity:.4; cursor:default; }
.nd-top select, .nd-overlay .nd-f select, .nd-overlay .nd-f input, .nd-overlay .nd-f textarea, .nd-search, .nd-dlg select, .nd-dlg input{
  background:var(--bg-2); color:var(--text-hi); border:1px solid var(--line); border-radius:7px; padding:6px 8px; }
.nd-zoom{ min-width:44px; text-align:center; color:var(--text-mid); font-family:var(--font-mono); font-size:12px; }
.nd-chk{ display:flex; align-items:center; gap:4px; color:var(--text-mid); font-size:12px; margin-left:6px; cursor:pointer; }
.nd-main{ flex:1; display:flex; min-height:0; }
.nd-left{ width:236px; flex:none; background:var(--bg-1); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.nd-tabs{ display:flex; border-bottom:1px solid var(--line); }
.nd-tab{ flex:1; border:0 !important; border-radius:0 !important; background:transparent !important; padding:10px 6px !important; }
.nd-tab.on{ color:var(--text-hi) !important; box-shadow:inset 0 -2px 0 var(--accent); }
.nd-lbody{ flex:1; overflow-y:auto; padding:10px; }
.nd-lbody h6{ margin:12px 0 6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-lo); }
.nd-lbody h6:first-child{ margin-top:0; }
.nd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.nd-item{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border:1px solid var(--line); border-radius:9px; background:var(--bg-2); cursor:grab; text-align:center; font-size:11px; color:var(--text-mid); user-select:none; }
.nd-item:hover{ border-color:var(--accent); color:var(--text-hi); }
.nd-item svg{ pointer-events:none; }
.nd-search{ width:100%; margin-bottom:6px; }
.nd-dev{ display:flex; align-items:center; gap:7px; padding:6px; border:1px solid var(--line-soft); border-radius:8px; margin-bottom:5px; cursor:grab; background:var(--bg-2); }
.nd-dev:hover{ border-color:var(--accent); }
.nd-dev i{ width:8px; height:8px; border-radius:50%; flex:none; }
.nd-dev div{ min-width:0; flex:1; } .nd-dev b{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nd-dev small{ display:block; color:var(--text-lo); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nd-dev em{ font-size:10px; color:var(--ok); font-style:normal; } .nd-dev.placed{ opacity:.55; }
.nd-canvas{ position:relative; flex:1; min-width:0; background:var(--bg-0); color:var(--text-lo); }
#ndSvg{ display:block; width:100%; height:100%; touch-action:none; user-select:none; cursor:default; }
#ndSvg[data-tool="hand"], #ndSvg.panning{ cursor:grabbing; } #ndSvg[data-tool="link"]{ cursor:crosshair; }
#ndSvg text{ font-family:var(--font-ui); user-select:none; pointer-events:none; }
.nd-port{ opacity:0; transition:opacity .12s; } [data-t="node"]:hover .nd-port, .nd-port.on{ opacity:1; }
.nd-cvhint{ position:absolute; left:12px; bottom:10px; font-size:11px; color:var(--text-lo); pointer-events:none; }
.nd-toast{ position:absolute; top:12px; left:50%; transform:translateX(-50%); padding:8px 16px; border-radius:9px; background:var(--bg-2); border:1px solid var(--line-bright); color:var(--text-hi); opacity:0; pointer-events:none; transition:opacity .2s; max-width:80%; z-index:5; }
.nd-toast.show{ opacity:1; } .nd-toast.bad{ border-color:var(--down); color:var(--down); }
.nd-right{ width:268px; flex:none; background:var(--bg-1); border-left:1px solid var(--line); overflow-y:auto; padding:12px; }
.nd-right h5{ margin:6px 0 10px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mid); }
.nd-f{ display:block; margin-bottom:9px; } .nd-f span{ display:block; font-size:11px; color:var(--text-lo); margin-bottom:3px; }
.nd-f input, .nd-f select, .nd-f textarea{ width:100%; box-sizing:border-box; } .nd-f textarea{ resize:vertical; }
.nd-f input[type=color]{ padding:2px; height:32px; }
.nd-two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.nd-inv{ display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line-soft); color:var(--text-mid); }
.nd-inv b{ color:var(--text-hi); font-weight:600; text-align:right; }
.nd-btnrow{ display:flex; gap:6px; margin-top:12px; } .nd-btnrow button{ flex:1; } .nd-btnrow.wrap{ flex-wrap:wrap; } .nd-btnrow.wrap button{ flex:1 1 45%; }
.nd-hint2{ margin-top:10px; font-size:11.5px; color:var(--text-lo); line-height:1.5; }
.nd-legend{ margin-top:14px; color:var(--text-mid); font-size:12px; } .nd-legend div{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.nd-empty{ color:var(--text-lo); padding:10px 2px; font-size:12px; } .nd-err{ color:var(--down); font-size:12px; min-height:16px; }
.nd-bar{ display:flex; gap:12px; padding:5px 12px; background:var(--bg-1); border-top:1px solid var(--line); color:var(--text-lo); font-size:11.5px; }
.nd-sp{ flex:1; }
.nd-dwrap{ display:none; position:absolute; inset:0; z-index:20; background:rgba(6,10,16,.7); align-items:center; justify-content:center; padding:16px; }
.nd-dwrap.open{ display:flex; }
.nd-dlg{ width:560px; max-width:100%; max-height:92%; overflow-y:auto; background:var(--bg-1); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.nd-dlg h4{ margin:0 0 14px; font-size:15px; }
.nd-list{ margin:12px 0; max-height:48vh; overflow-y:auto; }
.nd-row{ display:flex; align-items:center; gap:6px; padding:9px 10px; border:1px solid var(--line-soft); border-radius:9px; margin-bottom:6px; background:var(--bg-2); }
.nd-row div{ flex:1; min-width:0; } .nd-row small{ display:block; color:var(--text-lo); font-size:11.5px; margin-top:2px; }
@media (max-width:900px){ .nd-left{ width:180px; } .nd-right{ width:210px; } .nd-grp{ border-right:0; } }
@media (max-width:640px){ .nd-main{ flex-direction:column; } .nd-left,.nd-right{ width:auto; max-height:28%; border:0; border-bottom:1px solid var(--line); } }

/* ---- v3.7.0: device details (asset record) + Asset register ---- */
.nd-sec{ border:1px solid var(--line-soft); border-radius:9px; padding:6px 9px 2px; margin-bottom:8px; background:var(--bg-2); }
.nd-sec summary{ cursor:pointer; font-size:12px; font-weight:600; color:var(--text-mid); padding:2px 0 6px; user-select:none; }
.nd-sec[open] summary{ color:var(--text-hi); }
.nd-fdot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-left:6px; vertical-align:middle; }
.nd-warr{ font-size:11.5px; padding:4px 8px; border-radius:6px; margin:0 0 8px; }
.nd-warr.ok{ background:var(--ok-dim); color:var(--ok); } .nd-warr.soon{ background:var(--warn-dim); color:var(--warn); } .nd-warr.expired{ background:var(--down-dim); color:var(--down); }
.nd-dlg.wide{ width:min(1240px, 97%); }
.nd-regbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.nd-regbar #ndRegQ{ flex:1 1 300px; min-width:200px; }
.nd-regwrap{ max-height:56vh; overflow:auto; border:1px solid var(--line-soft); border-radius:9px; }
table.nd-reg{ border-collapse:collapse; width:100%; font-size:12px; }
table.nd-reg th{ position:sticky; top:0; background:var(--bg-2); color:var(--text-mid); text-align:left; font-weight:600; padding:7px 9px; white-space:nowrap; border-bottom:1px solid var(--line); }
table.nd-reg td{ padding:6px 9px; border-bottom:1px solid var(--line-soft); white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; color:var(--text-hi); }
table.nd-reg tr[data-regnode]{ cursor:pointer; } table.nd-reg tr[data-regnode]:hover td{ background:var(--bg-2); }
table.nd-reg td.nd-empty, table.nd-reg td.nd-err{ white-space:normal; padding:14px; }
.nd-sdot{ display:inline-block; width:8px; height:8px; border-radius:50%; }
.nd-wb{ font-size:10px; padding:1px 6px; border-radius:9px; margin-left:4px; }
.nd-wb.expired{ background:var(--down-dim); color:var(--down); } .nd-wb.soon{ background:var(--warn-dim); color:var(--warn); }