/* ============================================================
   Stage „Netzwerkmonitor" · Helles Admin-Dashboard.
   Alle Selektoren gescoped auf [data-demo="netzwerkmonitor"].
   Feste Design-Fläche 1100×688 px (Engine skaliert).
   ============================================================ */

[data-demo="netzwerkmonitor"] .nm-app{
  position:relative;
  width:1100px;height:688px;
  background:#f6f7fb;color:#1e2430;
  font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;line-height:1.4;
  display:flex;flex-direction:column;gap:10px;
  padding:12px 20px 14px;overflow:hidden;
}

/* ---------- Nav-Pill ---------- */
[data-demo="netzwerkmonitor"] .nm-nav{
  display:flex;align-items:center;justify-content:space-between;
  background:#ffffff;border:1px solid #e3e6f0;border-radius:14px;
  padding:8px 14px;flex:none;
  box-shadow:0 1px 3px rgba(30,40,80,.08);
}
[data-demo="netzwerkmonitor"] .nm-logo{
  display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;
}
[data-demo="netzwerkmonitor"] .nm-logo-icon{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
[data-demo="netzwerkmonitor"] .nm-nav-right{
  display:flex;align-items:center;gap:10px;
}

/* Auto-Refresh-Fortschrittsring */
[data-demo="netzwerkmonitor"] .nm-ring{
  width:20px;height:20px;transform:rotate(-90deg);
}
[data-demo="netzwerkmonitor"] .nm-ring .bg{
  fill:none;stroke:#e3e6f0;stroke-width:2.5;
}
[data-demo="netzwerkmonitor"] .nm-ring .fg{
  fill:none;stroke:#6366f1;stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:50.3;stroke-dashoffset:0;
}
[data-demo="netzwerkmonitor"] .nm-ring.nm-run .fg{
  stroke-dashoffset:50.3;
  transition:stroke-dashoffset 2.6s linear;
}

[data-demo="netzwerkmonitor"] .nm-btn{
  padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:500;
  border:1px solid #e3e6f0;color:#1e2430;background:transparent;
}
[data-demo="netzwerkmonitor"] .nm-btn.nm-csv{
  color:#16a34a;border-color:rgba(22,163,74,.35);
}

/* ---------- Stat-Cards ---------- */
[data-demo="netzwerkmonitor"] .nm-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:none;
}
[data-demo="netzwerkmonitor"] .nm-stat{
  background:#ffffff;border:1px solid #e3e6f0;border-radius:14px;
  padding:10px 16px;
  box-shadow:0 1px 3px rgba(30,40,80,.08);
}
[data-demo="netzwerkmonitor"] .nm-label{
  font-size:10.5px;color:#6b7280;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:3px;
}
[data-demo="netzwerkmonitor"] .nm-value{
  font-size:32px;font-weight:700;line-height:1;display:inline-block;
}
[data-demo="netzwerkmonitor"] .nm-stat.on   .nm-value{color:#16a34a}
[data-demo="netzwerkmonitor"] .nm-stat.off  .nm-value{color:#dc2626}
[data-demo="netzwerkmonitor"] .nm-stat.tot  .nm-value{color:#6366f1}
[data-demo="netzwerkmonitor"] .nm-stat.free .nm-value{color:#0284c7}
[data-demo="netzwerkmonitor"] .nm-value.nm-pop{
  animation:nm-pop .5s ease;
}
@keyframes nm-pop{
  0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)}
}

/* ---------- Toolbar ---------- */
[data-demo="netzwerkmonitor"] .nm-toolbar{
  display:flex;align-items:center;justify-content:space-between;flex:none;
}
[data-demo="netzwerkmonitor"] .nm-search{
  position:relative;display:flex;align-items:center;gap:8px;
  width:260px;height:32px;padding:0 12px 0 32px;
  background:#ffffff;border:1px solid #e3e6f0;border-radius:8px;
  font-size:12.5px;transition:border-color .25s, box-shadow .25s;
}
[data-demo="netzwerkmonitor"] .nm-search.nm-focus{
  border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
[data-demo="netzwerkmonitor"] .nm-search-icon{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:12px;color:#6b7280;
}
[data-demo="netzwerkmonitor"] .nm-ph{
  color:#6b7280;transition:opacity .2s;
}
[data-demo="netzwerkmonitor"] .nm-ph.nm-hide{opacity:0;position:absolute}
[data-demo="netzwerkmonitor"] .nm-val{color:#1e2430;white-space:pre}
[data-demo="netzwerkmonitor"] .nm-tabs{
  display:flex;gap:6px;
}
[data-demo="netzwerkmonitor"] .nm-tab{
  padding:6px 14px;border-radius:7px;font-size:12.5px;
  border:1px solid transparent;color:#6b7280;
}
[data-demo="netzwerkmonitor"] .nm-tab.active{
  background:#6366f1;border-color:#6366f1;color:#fff;
}

/* ---------- Tabelle ---------- */
[data-demo="netzwerkmonitor"] .nm-table{
  background:#ffffff;border:1px solid #e3e6f0;border-radius:14px;
  overflow:hidden;flex:none;
  box-shadow:0 1px 3px rgba(30,40,80,.08);
}
[data-demo="netzwerkmonitor"] .nm-thead,
[data-demo="netzwerkmonitor"] .nm-row{
  display:grid;
  grid-template-columns:88px 280px 118px 156px 104px 90px 1fr;
  align-items:center;
}
[data-demo="netzwerkmonitor"] .nm-thead{
  background:#f6f7fb;border-bottom:1px solid #e3e6f0;height:26px;
}
[data-demo="netzwerkmonitor"] .nm-th{
  padding:0 12px;font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:#6b7280;white-space:nowrap;
}
[data-demo="netzwerkmonitor"] .nm-th:first-child{padding-left:16px}
[data-demo="netzwerkmonitor"] .nm-th.sort-asc::after{content:' ▲';color:#6366f1}
[data-demo="netzwerkmonitor"] .nm-th.sort-desc::after{content:' ▼';color:#6366f1}

[data-demo="netzwerkmonitor"] .nm-body{
  position:relative;transition:height .45s cubic-bezier(.22,1,.36,1);
}
[data-demo="netzwerkmonitor"] .nm-row{
  position:absolute;left:0;right:0;top:0;height:32px;
  border-bottom:1px solid #eef0f6;font-size:12.5px;
  transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s, background .5s;
  background:transparent;
}
[data-demo="netzwerkmonitor"] .nm-row.nm-hidden{opacity:0}
[data-demo="netzwerkmonitor"] .nm-row.nm-out{opacity:0}
[data-demo="netzwerkmonitor"] .nm-cell{
  padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
[data-demo="netzwerkmonitor"] .nm-cell:first-child{padding-left:16px}
[data-demo="netzwerkmonitor"] .nm-cell-name{
  display:flex;align-items:center;gap:8px;font-weight:500;color:#1e2430;
}
[data-demo="netzwerkmonitor"] .nm-mono{
  font-family:'IBM Plex Mono','Courier New',monospace;font-size:11.5px;color:#4b5563;
}
[data-demo="netzwerkmonitor"] .nm-seen{color:#6b7280;font-size:12px}
[data-demo="netzwerkmonitor"] .nm-dim{color:#6b7280}

/* Status-Badges + Puls-Punkt */
[data-demo="netzwerkmonitor"] .nm-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:500;
}
[data-demo="netzwerkmonitor"] .nm-badge.on{background:#dcfce7;color:#15803d}
[data-demo="netzwerkmonitor"] .nm-badge.off{background:#fee2e2;color:#dc2626}
[data-demo="netzwerkmonitor"] .nm-dot{
  width:6px;height:6px;border-radius:50%;display:inline-block;flex:none;
}
[data-demo="netzwerkmonitor"] .nm-dot.on{
  background:#16a34a;animation:nm-pulse 2.2s ease-out infinite;
}
[data-demo="netzwerkmonitor"] .nm-dot.off{background:#dc2626}
@keyframes nm-pulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}
  70%{box-shadow:0 0 0 5px rgba(22,163,74,0)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}
}

/* Verbindungs- und IP-Typ-Badges */
[data-demo="netzwerkmonitor"] .nm-if{
  display:inline-block;padding:1px 7px;border-radius:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.03em;
}
[data-demo="netzwerkmonitor"] .nm-if.lan{background:#ccfbf1;color:#0f766e}
[data-demo="netzwerkmonitor"] .nm-if.w24,
[data-demo="netzwerkmonitor"] .nm-if.w5{background:#e0e7ff;color:#4338ca}
[data-demo="netzwerkmonitor"] .nm-src{
  display:inline-block;padding:1px 7px;border-radius:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.03em;
}
[data-demo="netzwerkmonitor"] .nm-src.dhcp{background:#eef0f6;color:#4b5563}
[data-demo="netzwerkmonitor"] .nm-src.res{background:#fef3c7;color:#a16207}
[data-demo="netzwerkmonitor"] .nm-src.stat{background:#e0f2fe;color:#0284c7}

/* Umbenennen-Icon */
[data-demo="netzwerkmonitor"] .nm-edit{
  margin-left:auto;color:#6b7280;font-size:11px;opacity:.4;flex:none;
}

/* Grün-Flash (Statuswechsel / Rename) */
[data-demo="netzwerkmonitor"] .nm-row.nm-flash{
  animation:nm-flash 1.4s ease-out;
}
@keyframes nm-flash{
  0%{background:rgba(22,163,74,.20)}
  100%{background:transparent}
}

/* Ghost-Host-Zeile */
[data-demo="netzwerkmonitor"] .nm-row.nm-ghostrow{
  background:#fef9c3;
  box-shadow:inset 3px 0 0 #eab308;
}
[data-demo="netzwerkmonitor"] .nm-gbadge{
  display:inline-block;padding:1px 7px;border-radius:20px;flex:none;
  background:#fde68a;color:#a16207;font-size:10px;font-weight:600;
}

/* ---------- Modal ---------- */
[data-demo="netzwerkmonitor"] .nm-modal-back{
  position:absolute;inset:0;z-index:20;
  background:rgba(30,40,80,.35);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s;
}
[data-demo="netzwerkmonitor"] .nm-modal-back.open{opacity:1;visibility:visible}
[data-demo="netzwerkmonitor"] .nm-modal{
  background:#ffffff;border:1px solid #e3e6f0;border-radius:16px;
  padding:28px;width:400px;box-shadow:0 25px 60px rgba(30,40,80,.18);
  transform:translateY(10px) scale(.97);transition:transform .25s;
}
[data-demo="netzwerkmonitor"] .nm-modal-back.open .nm-modal{
  transform:translateY(0) scale(1);
}
[data-demo="netzwerkmonitor"] .nm-modal h3{
  font-size:15px;font-weight:700;margin:0 0 5px;color:#1e2430;
}
[data-demo="netzwerkmonitor"] .nm-modal p{
  font-size:12.5px;color:#6b7280;margin:0 0 16px;
}
[data-demo="netzwerkmonitor"] .nm-minput{
  height:38px;padding:0 13px;display:flex;align-items:center;
  background:#ffffff;border:1px solid #6366f1;border-radius:8px;
  color:#1e2430;font-size:13.5px;margin-bottom:18px;white-space:pre;
  box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
[data-demo="netzwerkmonitor"] .nm-mbtns{
  display:flex;gap:10px;justify-content:flex-end;
}
[data-demo="netzwerkmonitor"] .nm-mbtn{
  padding:8px 17px;border-radius:8px;font-size:12.5px;font-weight:500;
}
[data-demo="netzwerkmonitor"] .nm-mcancel{
  border:1px solid #e3e6f0;color:#6b7280;
}
[data-demo="netzwerkmonitor"] .nm-msave{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-weight:600;
}

/* Reduced Motion: Dauer-Puls aus */
@media (prefers-reduced-motion: reduce){
  [data-demo="netzwerkmonitor"] .nm-dot.on{animation:none}
  [data-demo="netzwerkmonitor"] .nm-row{transition:none}
  [data-demo="netzwerkmonitor"] .nm-body{transition:none}
}