/* VulnTech NetLab - the network diagram, device consoles and Packet Walk.
 * Colours follow the site's lab theme (--lab-*), with fallbacks so the
 * widget also works inside lesson pages. */

.netlab {
  --nl-bg: #05080d;
  --nl-panel: rgba(13, 25, 38, 0.98);
  --nl-line: var(--lab-line, rgba(245, 199, 107, 0.22));
  --nl-gold: var(--lab-gold, #f5c76b);
  --nl-text: #d8e1ea;
  --nl-muted: var(--lab-muted, #8b9bab);
  --nl-ok: #3fb950;
  --nl-down: #f0524a;
  --nl-admin: #f2a33a;
  --nl-mono: "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--nl-line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 37, 54, 0.96), rgba(11, 24, 37, 0.98));
  color: var(--nl-text);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(244, 234, 210, 0.08);
}

.netlab * { box-sizing: border-box; }

.nl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgba(245, 199, 107, 0.18);
  background: rgba(6, 12, 20, 0.85);
}

.nl-brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}

.nl-brand strong {
  color: var(--lab-parchment, #f4ead2);
  font-family: var(--nl-mono);
  font-size: 0.86rem;
  white-space: nowrap;
}

.nl-status {
  color: var(--nl-muted);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nl-buttons { display: inline-flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(111, 119, 133, 0.35);
  border-radius: 7px;
  background: rgba(16, 20, 29, 0.82);
  color: #c7d2df;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.nl-btn[hidden] { display: none; }
.nl-btn:hover, .nl-btn:focus-visible { border-color: rgba(245, 199, 107, 0.5); color: #fff; }
.nl-btn[aria-pressed="true"] { border-color: var(--nl-gold); color: var(--nl-gold); background: rgba(245, 199, 107, 0.1); }
.nl-btn.primary { background: linear-gradient(135deg, #f5c76b, #f7b955 54%, #b7791f); color: #06111d; border-color: transparent; }

.nl-body {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  min-height: 0;
  flex: 1 1 auto;
}

/* ---- the diagram ------------------------------------------------------------ */
.nl-canvas {
  position: relative;
  min-height: 300px;
  border-right: 1px solid rgba(245, 199, 107, 0.14);
  background:
    radial-gradient(circle at 1px 1px, rgba(140, 160, 180, 0.12) 1px, transparent 0) 0 0 / 22px 22px,
    #07111b;
}

.nl-canvas svg { display: block; width: 100%; height: 100%; min-height: 300px; touch-action: manipulation; }

.nl-link line:not(.nl-hit) { stroke: #7e8fa3; stroke-width: 2.4; }
.nl-link.is-fibre line:not(.nl-hit) { stroke: #e6a23c; stroke-dasharray: 7 4; }
.nl-link.is-cross line:not(.nl-hit) { stroke-dasharray: 2 5; stroke-linecap: round; }
.nl-link.is-wifi line:not(.nl-hit) { stroke: #58a6ff; stroke-dasharray: 1 6; stroke-linecap: round; stroke-width: 3; }
.nl-link line.nl-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.nl-link:hover line:not(.nl-hit) { stroke: #c2d0de; }

.nl-end-dot { stroke: #07111b; stroke-width: 2; }
.nl-end-dot.up { fill: var(--nl-ok); }
.nl-end-dot.down { fill: var(--nl-down); }
.nl-end-dot.admin { fill: var(--nl-admin); }

.nl-port-label {
  fill: #b7c4d3;
  font: 600 10.5px var(--nl-mono);
  paint-order: stroke;
  stroke: #07111b;
  stroke-width: 3px;
}

.nl-device { cursor: pointer; }
.nl-device .nl-dev-bg { fill: #10202f; stroke: #3a5068; stroke-width: 1.5; }
.nl-device:hover .nl-dev-bg, .nl-device:focus .nl-dev-bg { stroke: var(--nl-gold); }
.nl-device.is-active .nl-dev-bg { stroke: var(--nl-gold); stroke-width: 2.5; fill: #162a3d; }
.nl-device:focus { outline: none; }
.nl-device .nl-icon { fill: none; stroke: #9fd3ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nl-device.kind-switch .nl-icon { stroke: #8ff0c0; }
.nl-device.kind-pc .nl-icon, .nl-device.kind-laptop .nl-icon { stroke: #f5d78a; }
.nl-device.kind-server .nl-icon { stroke: #d4b5ff; }
.nl-dev-name { fill: #e7eef5; font: 700 12px var(--nl-mono); text-anchor: middle; }
.nl-dev-sub { fill: var(--nl-muted); font: 500 10px var(--nl-mono); text-anchor: middle; }

.nl-packet { fill: var(--nl-gold); stroke: #fff6dc; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(245, 199, 107, 0.9)); }
.nl-packet.is-arp { fill: #79c0ff; stroke: #e1f0ff; filter: drop-shadow(0 0 6px rgba(121, 192, 255, 0.9)); }
.nl-packet.is-drop { fill: var(--nl-down); }
.nl-flash { fill: none; stroke: var(--nl-gold); stroke-width: 3; opacity: 0.9; }

.nl-legend {
  position: absolute;
  left: 8px;
  bottom: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--nl-muted);
  font-size: 0.7rem;
  pointer-events: none;
}

.nl-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; vertical-align: middle; }

.nl-popover {
  position: absolute;
  z-index: 5;
  max-width: 280px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 199, 107, 0.35);
  border-radius: 8px;
  background: rgba(8, 16, 26, 0.97);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  color: var(--nl-text);
  font-size: 0.8rem;
  line-height: 1.45;
}

.nl-popover h4 { margin: 0 0 6px; color: var(--nl-gold); font-size: 0.84rem; }
.nl-popover table { width: 100%; border-collapse: collapse; font-family: var(--nl-mono); font-size: 0.74rem; }
.nl-popover td { padding: 2px 4px 2px 0; vertical-align: top; }
.nl-popover td:first-child { color: var(--nl-muted); white-space: nowrap; }
.nl-swap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(245, 199, 107, 0.15); }
.nl-swap label { display: flex; flex-direction: column; gap: 2px; color: var(--nl-muted); font-size: 0.72rem; }
.nl-swap select { height: 28px; border: 1px solid rgba(111, 119, 133, 0.45); border-radius: 6px; background: #050b12; color: #fff; font-size: 0.76rem; }
.nl-swap .nl-btn { height: 28px; margin-top: 14px; }
.nl-popover .nl-close { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--nl-muted); font-size: 1rem; cursor: pointer; }

/* ---- consoles ------------------------------------------------------------------- */
.nl-consoles { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.nl-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 6px 6px 0;
  border-bottom: 1px solid rgba(245, 199, 107, 0.14);
  background: rgba(6, 12, 20, 0.6);
  scrollbar-width: thin;
}

.nl-tab {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--nl-muted);
  font: 700 0.78rem var(--nl-mono);
  cursor: pointer;
}

.nl-tab.is-active { border-color: rgba(245, 199, 107, 0.25); background: var(--nl-bg); color: var(--nl-gold); }
.nl-tab .nl-tab-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--nl-gold); vertical-align: middle; }

.nl-console-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px 4px 12px;
  background: var(--nl-bg);
  color: var(--nl-muted);
  font-size: 0.74rem;
}

.nl-console-head span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-console-head .nl-btn { height: 26px; font-size: 0.72rem; }

.nl-screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  height: clamp(320px, 52vh, 560px);
  overflow-y: auto;
  padding: 4px 12px 10px;
  background: var(--nl-bg);
  color: #d6e2ee;
  font: 13px/1.42 var(--nl-mono);
  cursor: text;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 199, 107, 0.35) transparent;
}

/* Like a real terminal, columns never wrap: wide output scrolls sideways. */
.nl-screen { overflow-x: auto; }
.nl-out { margin: 0; white-space: pre; font: inherit; color: inherit; background: none; border: 0; padding: 0; overflow: visible; }
.nl-out .nl-log { color: #9fb3c8; }
.nl-out .nl-err { color: #ffb4a8; }
.nl-out .nl-cmd { color: #ffffff; }

.nl-inputline { display: flex; align-items: baseline; white-space: pre; }
.nl-prompt { color: #8ff0c0; }
.nl-input {
  flex: 1 1 auto;
  min-width: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #ffffff;
  font: inherit;
  caret-color: var(--nl-gold);
}

.nl-keybar {
  display: none;
  gap: 4px;
  overflow-x: auto;
  padding: 6px;
  border-top: 1px solid rgba(245, 199, 107, 0.14);
  background: rgba(6, 12, 20, 0.85);
}

.nl-keybar button {
  flex: 0 0 auto;
  min-width: 40px;
  height: 32px;
  border: 1px solid rgba(111, 119, 133, 0.35);
  border-radius: 6px;
  background: rgba(16, 20, 29, 0.82);
  color: #c7d2df;
  font: 700 0.78rem var(--nl-mono);
}

@media (hover: none) and (pointer: coarse) {
  .nl-keybar { display: flex; }
}

/* ---- PC IP settings ------------------------------------------------------------------ */
.nl-ipform {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(245, 199, 107, 0.14);
  background: #0a1622;
  font-size: 0.8rem;
}

.nl-ipform[hidden] { display: none; }
.nl-ipform label { color: var(--nl-muted); }
.nl-ipform input {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(111, 119, 133, 0.45);
  border-radius: 6px;
  background: #050b12;
  color: #fff;
  font: 13px var(--nl-mono);
}

.nl-ipform input:focus { outline: none; border-color: var(--nl-gold); }
.nl-ipform .nl-ipform-actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.nl-ipform .nl-ipform-note { color: #ffb4a8; font-size: 0.76rem; }
.nl-ipform .nl-ipform-mode { grid-column: 1 / -1; display: flex; gap: 16px; flex-wrap: wrap; }
.nl-ipform .nl-ipform-mode label { color: inherit; cursor: pointer; }
.nl-ipform input:disabled { opacity: 0.5; }
.nl-ipform select { background: transparent; color: inherit; border: 1px solid var(--nl-line, #2b3a4d); border-radius: 6px; padding: 5px 7px; font: inherit; }
.nl-ipform select option { color: #111; }
.nl-wifiform .nl-wifi-state, .nl-wifiform .nl-wifi-list { grid-column: 1 / -1; font-size: 0.8rem; }
.nl-wifiform .nl-wifi-list { display: flex; flex-direction: column; gap: 2px; color: var(--nl-muted); }
.nl-head-buttons { display: inline-flex; gap: 6px; }

/* ---- Packet Walk ------------------------------------------------------------------------ */
.nl-walk {
  display: none;
  border-top: 1px solid rgba(245, 199, 107, 0.18);
  background: #08121c;
}

.netlab.is-walking .nl-walk { display: block; }

.nl-walk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--nl-gold);
  font-weight: 800;
  font-size: 0.82rem;
}

.nl-walk-head span { flex: 1 1 auto; }
.nl-walk-empty { padding: 0 12px 12px; color: var(--nl-muted); font-size: 0.8rem; }

.nl-walk ol {
  max-height: 220px;
  margin: 0;
  padding: 0 12px 10px 34px;
  overflow-y: auto;
  font-size: 0.78rem;
  line-height: 1.45;
}

.nl-walk li { padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.nl-walk li:hover { background: rgba(245, 199, 107, 0.06); }
.nl-walk li.is-current { background: rgba(245, 199, 107, 0.14); }
.nl-walk li b { color: #e7eef5; font-family: var(--nl-mono); font-weight: 700; }
.nl-walk li.kind-drop b { color: #ffb4a8; }
.nl-walk li em { display: block; color: var(--nl-muted); font-style: normal; }

/* On the lab page the task list sits beside NetLab, so the diagram goes on top. */
.netlab.is-stacked .nl-body { grid-template-columns: minmax(0, 1fr); }
.netlab.is-stacked .nl-canvas { border-right: 0; border-bottom: 1px solid rgba(245, 199, 107, 0.14); }
.netlab.is-stacked .nl-canvas svg { min-height: 230px; max-height: 300px; }
.netlab.is-stacked .nl-screen { height: clamp(300px, 46vh, 520px); }
.netlab.is-fullscreen.is-stacked .nl-body { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }
.netlab.is-fullscreen.is-stacked .nl-canvas svg { max-height: none; }

/* ---- full screen and small screens ------------------------------------------------------- */
.netlab.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  border-radius: 0;
}

.netlab.is-fullscreen .nl-screen { height: auto; }
.netlab.is-fullscreen .nl-body { flex: 1 1 auto; }
body.nl-fullscreen-open { overflow: hidden; }

@media (max-width: 900px) {
  .nl-body { grid-template-columns: minmax(0, 1fr); }
  .nl-canvas { border-right: 0; border-bottom: 1px solid rgba(245, 199, 107, 0.14); min-height: 220px; }
  .nl-canvas svg { min-height: 220px; max-height: 340px; }
  .nl-screen { height: 360px; font-size: 12.5px; }
}

/* ---- lesson pages: a "Try it in NetLab" panel under an example --------------------------- */
.netlab-try { margin: 6px 0 18px; }
.netlab-try > .nl-btn { height: 36px; }
.netlab-try .netlab { margin-top: 10px; }
.netlab-try .nl-screen { height: 340px; }

.nl-drill {
  margin: 14px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--nl-line, rgba(245, 199, 107, 0.22));
  border-radius: 8px;
  background: rgba(11, 24, 37, 0.7);
}

.nl-drill h4 { margin: 0 0 8px; }
.nl-drill-q { font-family: "JetBrains Mono", Menlo, Consolas, monospace; font-size: 1.02rem; margin: 6px 0 10px; }
.nl-drill form { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-drill input {
  flex: 1 1 180px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(111, 119, 133, 0.45);
  border-radius: 6px;
  background: #050b12;
  color: #fff;
  font: 14px "JetBrains Mono", Menlo, Consolas, monospace;
}

.nl-drill-result { min-height: 1.4em; margin-top: 8px; font-size: 0.9rem; }
.nl-drill-result.ok { color: #7ee2a0; }
.nl-drill-result.bad { color: #ffb4a8; }
.nl-drill-score { color: #8b9bab; font-size: 0.82rem; }

/* Example transcripts in lessons (built from the simulator by build_ccna_course.py). */
pre.netlab-transcript { white-space: pre-wrap; word-break: break-word; }
pre.netlab-transcript .t-prompt { color: #7ee787; font-weight: 700; }
pre.netlab-transcript .t-cmd { color: #f4ead2; font-weight: 700; }
pre.netlab-transcript .t-dev { display: inline-block; margin-top: 4px; color: #f5c76b; font-weight: 800; }
pre.netlab-transcript .t-note { color: #8b9bab; font-style: italic; }
.nl-console-head > .nl-head-buttons { flex: 0 0 auto; overflow: visible; }