/* =========================================================================
   5G Core Lab — main shell redesign (elevated dark glass · indigo→pink)
   Pass 1: reskin header / NF strip / sidebar / topology / terminal / dock.
   CSS-only, additive, reversible (remove the <link>). Matches the new
   Trace Explorer design language. Loaded AFTER inline styles → wins on order.
   2026-06-10
   ========================================================================= */

:root {
  --grad: linear-gradient(120deg, #ff0071 0%, #a855f7 55%, #ec4899 100%);
  --grad-soft: linear-gradient(120deg, rgba(255,0,113,.16), rgba(236,72,153,.12));
  --glass: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64));
  --ring: 0 1px 0 rgba(255,255,255,.05) inset;
}

/* ambient depth behind the whole app */
body {
  background:
    radial-gradient(1100px 540px at 82% -8%, rgba(236,72,153,.10), transparent 60%),
    radial-gradient(1000px 560px at -6% 12%, rgba(255,0,113,.12), transparent 58%),
    var(--bg-dark) !important;
}

/* ---------- Header ---------- */
.header {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(255,0,113,.16) !important;
  box-shadow: 0 10px 34px -22px rgba(0,0,0,.9);
}
.logo-text { background: var(--grad) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.logo img { filter: drop-shadow(0 0 10px rgba(255,0,113,.55)); border-radius: 9px; }
.logo-badge {
  background: var(--grad) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 4px 14px -4px rgba(236,72,153,.55);
  position: relative;
}
.logo-badge::after {
  content: ''; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: pulse-dot 1.8s infinite;
}
.logo-badge { padding-left: 18px !important; }

/* action buttons → pill, lift */
.header-actions .btn { border-radius: 10px !important; }
.btn-primary { background: var(--grad) !important; box-shadow: 0 5px 18px -6px rgba(236,72,153,.55); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 26px -6px rgba(236,72,153,.7) !important; }
.btn-secondary {
  background: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,0,113,.18) !important;
}
.btn-secondary:hover { border-color: rgba(255,0,113,.5) !important; transform: translateY(-1px); }

/* ---------- NF status strip ---------- */
.status-bar {
  background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.5)) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light) !important;
}
.nf-status-chip {
  background: linear-gradient(180deg, rgba(244,244,246,.7), rgba(255,255,255,.5)) !important;
  border: 1px solid rgba(228,228,233,.8) !important;
  box-shadow: var(--ring);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nf-status-chip:hover { transform: translateY(-1px); border-color: rgba(255,0,113,.4) !important; box-shadow: 0 8px 18px -10px rgba(255,0,113,.5); }
.nf-status-chip.running { border-color: rgba(16,185,129,.32) !important; }
.nf-dot.running { width: 7px; height: 7px; box-shadow: 0 0 8px var(--secondary), 0 0 2px var(--secondary); }

/* ---------- Sidebar ---------- */
.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6)) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255,0,113,.12) !important;
}
.sidebar-title { color: var(--text-muted); opacity: .9; }
.nav-item { border-radius: 10px !important; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.nav-item:hover { transform: translateX(2px); background: rgba(255,0,113,.12) !important; }
.nav-item.active {
  background: var(--grad-soft) !important;
  border-left: 3px solid #ec4899 !important;
  box-shadow: -8px 0 22px -14px rgba(236,72,153,.7), var(--ring);
}
.nav-item.active i { color: #ec4899; }
.nav-badge.running { box-shadow: 0 0 0 1px rgba(16,185,129,.25) inset; }
.lab-info {
  background: var(--grad-soft) !important;
  border: 1px solid rgba(255,0,113,.2) !important;
  border-radius: 14px !important;
  box-shadow: var(--ring);
}

/* tighter vertical rhythm so the terminal keeps its height */
.content { gap: .55rem !important; }

/* ---------- Topology ---------- */
.topology-bar {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,0,113,.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px -26px rgba(0,0,0,.8);
}
.topology-title { color: var(--text-muted); }
.topo-node-icon {
  width: 44px !important; height: 44px !important; border-radius: 13px !important;
  border: 1px solid rgba(255,0,113,.18) !important;
  box-shadow: var(--ring), 0 8px 18px -12px rgba(0,0,0,.8);
}
.topo-node:hover .topo-node-icon { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 24px -10px rgba(255,0,113,.55); border-color: rgba(255,0,113,.5) !important; }
.topo-node-icon .topo-status { box-shadow: 0 0 8px currentColor; }
.topo-node-label { color: var(--text-secondary); }

/* ---------- Terminal ---------- */
.terminal-panel {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,0,113,.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 44px -28px rgba(0,0,0,.85);
}
.terminal-header { background: linear-gradient(180deg, rgba(244,244,246,.8), rgba(255,255,255,.4)) !important; border-bottom: 1px solid var(--border-light) !important; }
.terminal-title .status-dot { width: 9px; height: 9px; }

/* ---------- Quick command dock ---------- */
.quick-commands { background: linear-gradient(180deg, rgba(244,244,246,.55), rgba(255,255,255,.35)) !important; border-top: 1px solid var(--border-light) !important; }
.quick-tab { border-radius: 8px !important; transition: all .18s ease; }
.quick-tab.active { color: #fff !important; background: var(--grad) !important; box-shadow: 0 5px 16px -6px rgba(236,72,153,.5); }
.quick-cmd {
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(228,228,233,.9) !important;
  border-radius: 8px !important;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.quick-cmd:hover { transform: translateY(-1px); border-color: rgba(255,0,113,.55) !important; box-shadow: 0 8px 18px -10px rgba(255,0,113,.5); }

@media (prefers-reduced-motion: reduce) {
  .nav-item, .btn, .nf-status-chip, .topo-node-icon, .quick-cmd { transition: none !important; }
  .logo-badge::after { animation: none; }
}