/* ===================================================================
 * network-simulation.css — bac à sable réseau (partie 11 du document).
 * Reprend les variables de thème (--ink, --line, --accent-*) définies dans
 * portfolio/projects/network-simulation.html : chargé par ce gabarit seul.
 * =================================================================== */

.sim-wrap{
  margin:28px 0 40px; background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
}

/* ---------- barre d'outils ---------- */

.sim-toolbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.sim-toolbar .sep{ width:1px; align-self:stretch; background:var(--line); margin:0 2px; }
.sim-toolbar .hint{ color:var(--ink-dim); font-size:0.78rem; margin-left:auto; }
.sim-btn{
  border-radius:6px; padding:7px 13px; font-size:0.8rem; font-weight:600; cursor:pointer;
  font-family:'IBM Plex Sans'; border:1px solid var(--line); background:var(--bg-panel-2); color:var(--ink);
}
.sim-btn:hover{ border-color:var(--accent-cyan); }
.sim-btn:focus-visible{ outline:2px solid var(--accent-cyan); outline-offset:2px; }
.sim-btn[disabled]{ opacity:0.45; cursor:not-allowed; }
.sim-btn.active{ background:var(--accent-cyan); border-color:var(--accent-cyan); color:var(--bg-deep); }
/* `sim-danger` et non `danger` : la classe `danger` du document est un
   encadré (fond rouge, padding, marges) qui déformerait le bouton. */
.sim-btn.sim-danger:hover{ border-color:var(--accent-red); }
.sim-btn.sim-danger.active{ background:var(--accent-red); border-color:var(--accent-red); color:#fff; }
.sim-btn.ghost{ background:none; }
.sim-btn.small{ padding:4px 9px; font-size:0.75rem; }

/* ---------- canevas ---------- */

.sim-canvas-wrap{
  position:relative;
  background:
    linear-gradient(rgba(var(--cyan-rgb),0.06) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(var(--cyan-rgb),0.06) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg-panel-2);
}
svg.sim-canvas{ width:100%; height:420px; display:block; touch-action:none; cursor:grab; }
svg.sim-canvas.placing, svg.sim-canvas.cabling{ cursor:crosshair; }
svg.sim-canvas.deleting{ cursor:not-allowed; }
svg.sim-canvas.panning{ cursor:grabbing; }

.sim-canvas .sim-link{ stroke:var(--line); stroke-width:2; pointer-events:none; }
.sim-canvas .sim-link.down{ stroke:var(--accent-red); stroke-dasharray:5 4; }
.sim-canvas .sim-link-hit{ stroke:transparent; stroke-width:14; cursor:pointer; }
.sim-canvas.deleting .sim-link-hit:hover ~ .sim-link{ stroke:var(--accent-red); }
.sim-canvas .sim-link-label{
  fill:var(--ink-dim); font-family:'IBM Plex Mono'; font-size:8px;
  text-anchor:middle; pointer-events:none;
}

.sim-device{ cursor:grab; }
.sim-device:active{ cursor:grabbing; }
.sim-device rect, .sim-device circle{
  fill:var(--bg-panel-2); stroke:var(--accent-cyan); stroke-width:1.5; transition:stroke .15s, filter .15s;
}
.sim-device.sel rect, .sim-device.sel circle{ stroke:var(--accent-amber); filter:drop-shadow(0 0 6px rgba(var(--amber-rgb),0.55)); }
.sim-device.pending rect, .sim-device.pending circle{ stroke-dasharray:4 3; }
.sim-device text{ fill:var(--ink); font-family:'IBM Plex Mono'; font-size:11px; text-anchor:middle; pointer-events:none; }
.sim-device .sd-sub{ fill:var(--ink-dim); font-size:9px; }
.sim-device.t-pc{ color:var(--accent-cyan); }
.sim-device.t-server{ color:var(--accent-green); }
.sim-device.t-switch{ color:var(--accent-amber); }
.sim-device.t-router{ color:var(--accent-red); }
.sim-device.t-pc rect, .sim-device.t-server rect,
.sim-device.t-switch rect, .sim-device.t-router circle{ stroke:currentColor; }
.sim-empty-hint{ fill:var(--ink-dim); font-family:'IBM Plex Sans'; font-size:12px; text-anchor:middle; }
#sim-packet circle{ filter:drop-shadow(0 0 4px currentColor); }

/* ---------- menu de sélection de port (câblage) ---------- */

.sim-portmenu{
  position:absolute; z-index:12; min-width:190px; max-height:260px; overflow-y:auto;
  background:var(--bg-panel); border:1px solid var(--accent-cyan); border-radius:8px;
  box-shadow:0 8px 24px rgba(var(--shadow-rgb),0.18); padding:6px;
}
.sim-portmenu[hidden]{ display:none; }
.sim-portmenu .pm-title{
  font-size:0.72rem; color:var(--ink-dim); padding:4px 8px 6px;
  border-bottom:1px solid var(--line); margin-bottom:4px;
}
.sim-portmenu button{
  display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--ink); font-family:'IBM Plex Mono'; font-size:0.78rem; padding:5px 8px; border-radius:5px;
}
.sim-portmenu button:hover, .sim-portmenu button:focus-visible{
  background:var(--bg-panel-2); color:var(--accent-cyan); outline:none;
}
.sim-portmenu .pm-empty{ color:var(--ink-dim); font-size:0.78rem; padding:6px 8px; font-style:italic; }

/* ---------- panneaux du bas ---------- */

/* Le terminal doit pouvoir afficher ~80 colonnes sans repli : on lui
   donne la part du lion, et minmax(0,…) autorise le défilement interne. */
.sim-panels{
  display:grid; grid-template-columns:minmax(0, 1.8fr) minmax(0, 1fr);
  gap:0; border-top:1px solid var(--line);
}
@media (max-width:1000px){ .sim-panels{ grid-template-columns:minmax(0, 1fr); } }

/* Hauteur *fixe*, pas seulement minimale : sans elle, la ligne de la
   grille se dimensionne sur le contenu et le terminal s'allonge
   indéfiniment au lieu de faire défiler son historique. */
.sim-device-panel{
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  height:440px; min-height:0; min-width:0;
}
@media (max-width:1000px){
  .sim-device-panel{ border-right:none; border-bottom:1px solid var(--line); height:400px; }
}

.sim-dp-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg-panel-2);
}
.sim-dp-title{
  font-family:'Barlow Condensed', sans-serif; font-size:1.05rem; color:var(--ink-strong);
  text-transform:uppercase; letter-spacing:0.02em;
}
.sim-tabs{ display:flex; gap:4px; margin-left:auto; }
.sim-tab{
  background:none; border:1px solid transparent; border-radius:6px 6px 0 0;
  color:var(--ink-dim); font-family:'IBM Plex Sans'; font-size:0.78rem; font-weight:600;
  padding:5px 12px; cursor:pointer;
}
.sim-tab:hover{ color:var(--ink); }
.sim-tab.active{ color:var(--bg-deep); background:var(--accent-cyan); border-color:var(--accent-cyan); }
.sim-tab:focus-visible{ outline:2px solid var(--accent-cyan); outline-offset:2px; }

.sim-dp-body{ flex:1; min-height:0; min-width:0; padding:14px 16px; overflow-y:auto; }
.sim-dp-body.term-host{ padding:0; overflow:hidden; display:flex; }
.sim-dp-body .td-empty{ color:var(--ink-dim); font-style:italic; font-size:0.85rem; }

/* ---------- formulaires de configuration ---------- */

.sim-cfg h5{
  font-size:0.82rem; color:var(--accent-cyan); margin:16px 0 8px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
}
.sim-cfg h5:first-child{ margin-top:0; }
.sim-cfg .calc-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; align-items:flex-end; }
.sim-cfg .calc-field{ display:flex; flex-direction:column; }
.sim-cfg label{ font-size:0.75rem; color:var(--ink-dim); display:block; margin-bottom:4px; }
.sim-cfg input[type=text], .sim-cfg input[type=number], .sim-cfg select{
  background:var(--bg-deep); border:1px solid var(--line); border-radius:6px;
  color:var(--accent-green); padding:6px 9px; font-size:0.82rem;
  font-family:'IBM Plex Mono'; min-width:120px; max-width:100%;
}
.sim-cfg input:focus, .sim-cfg select:focus{ outline:2px solid var(--accent-cyan); outline-offset:1px; }
.sim-cfg input.invalid{ border-color:var(--accent-red); color:var(--accent-red); }
.sim-cfg table{ width:100%; font-size:0.78rem; margin:6px 0 10px; border-collapse:collapse; }
.sim-cfg th{
  text-align:left; font-size:0.7rem; color:var(--ink-dim); font-weight:600;
  text-transform:uppercase; letter-spacing:0.03em; padding:4px 6px; border-bottom:1px solid var(--line);
}
.sim-cfg td{ padding:3px 6px; border-bottom:1px solid var(--line); }
.sim-cfg .sim-rm{
  background:none; border:1px solid var(--line); color:var(--accent-red);
  border-radius:4px; cursor:pointer; padding:1px 7px; font-size:0.75rem;
}
.sim-cfg .sim-rm:hover{ border-color:var(--accent-red); }
.sim-cfg .cfg-note{ color:var(--ink-dim); font-size:0.75rem; margin:4px 0 10px; }
.sim-cfg .cfg-state{ font-family:'IBM Plex Mono'; font-size:0.75rem; }
.sim-cfg .cfg-state.up{ color:var(--accent-green); }
.sim-cfg .cfg-state.down{ color:var(--accent-red); }
.sim-cfg .cfg-state.admin{ color:var(--ink-dim); }

/* ---------- terminal ---------- */

/* min-width:0 tout le long de la chaîne flex : sans cela, le contenu
   non replié du terminal élargit le panneau au lieu de le faire défiler. */
.sim-term{
  display:flex; flex-direction:column; flex:1; min-height:0; min-width:0;
  background:var(--bg-deep); font-family:'IBM Plex Mono'; font-size:0.78rem; line-height:1.55;
  cursor:text;
}
/* `white-space:pre` (et non pre-wrap) : les colonnes des commandes
   `show` restent alignées, le panneau défile horizontalement au besoin. */
.sim-term-out{
  flex:1; min-height:0; min-width:0; overflow:auto; padding:10px 12px 0;
  white-space:pre; color:var(--ink);
}
.sim-term-out > div{ min-height:1.55em; }
.sim-term-out .echo{ color:var(--accent-cyan); }
.sim-term-out .err{ color:var(--accent-red); }
.sim-term-out .sys{ color:var(--ink-dim); }
.sim-term-line{
  display:flex; align-items:baseline; gap:6px; padding:4px 12px 10px;
}
.sim-term-prompt{ color:var(--accent-amber); white-space:pre; flex:none; }
.sim-term-input{
  flex:1; background:none; border:none; outline:none; padding:0;
  color:var(--accent-green); font-family:'IBM Plex Mono'; font-size:0.78rem; min-width:0;
}
.sim-term-help{
  border-top:1px solid var(--line); padding:6px 12px; color:var(--ink-dim); font-size:0.72rem;
  font-family:'IBM Plex Sans'; flex:none;
}

/* ---------- panneau de test ---------- */

/* Même contrainte de hauteur que la fenêtre d'appareil : le panneau
   défile au lieu d'étirer la ligne de la grille. */
.sim-ping{ padding:14px 16px; min-height:0; overflow-y:auto; }
.sim-ping h4{ margin:0 0 10px; font-size:0.95rem; color:var(--ink-strong); font-family:'Barlow Condensed', sans-serif; }
.sim-ping .sim-ping-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.sim-ping select{
  background:var(--bg-deep); border:1px solid var(--line); border-radius:6px;
  color:var(--accent-green); padding:6px 9px; font-size:0.82rem; font-family:'IBM Plex Mono';
}
.sim-log{
  background:var(--bg-deep); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; max-height:250px; overflow-y:auto;
  font-family:'IBM Plex Mono'; font-size:0.78rem; line-height:1.6;
}
.sim-log .line{ white-space:pre-wrap; word-break:break-word; }
.sim-log .tag{ font-weight:700; margin-right:6px; }
.sim-log .tag.ok{ color:var(--accent-green); }
.sim-log .tag.fail{ color:var(--accent-red); }
.sim-log .tag.info{ color:var(--accent-cyan); }
.sim-log .td-empty{ color:var(--ink-dim); font-style:italic; }

/* ---------- barres de défilement ---------- */
/* Une barre fine et discrète, assez visible pour signaler qu'il reste du
   contenu au-dessus. */
.sim-term-out, .sim-log, .sim-dp-body, .sim-ping, .sim-portmenu{
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.sim-term-out::-webkit-scrollbar, .sim-log::-webkit-scrollbar,
.sim-dp-body::-webkit-scrollbar, .sim-ping::-webkit-scrollbar,
.sim-portmenu::-webkit-scrollbar{ width:10px; height:10px; }
.sim-term-out::-webkit-scrollbar-track, .sim-log::-webkit-scrollbar-track,
.sim-dp-body::-webkit-scrollbar-track, .sim-ping::-webkit-scrollbar-track,
.sim-portmenu::-webkit-scrollbar-track{ background:transparent; }
.sim-term-out::-webkit-scrollbar-thumb, .sim-log::-webkit-scrollbar-thumb,
.sim-dp-body::-webkit-scrollbar-thumb, .sim-ping::-webkit-scrollbar-thumb,
.sim-portmenu::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:6px; border:2px solid transparent; background-clip:padding-box;
}
.sim-term-out::-webkit-scrollbar-thumb:hover, .sim-log::-webkit-scrollbar-thumb:hover,
.sim-dp-body::-webkit-scrollbar-thumb:hover, .sim-ping::-webkit-scrollbar-thumb:hover,
.sim-portmenu::-webkit-scrollbar-thumb:hover{ background:var(--ink-dim); background-clip:padding-box; }
.sim-term-out::-webkit-scrollbar-corner{ background:transparent; }

/* ---------- inventaire des commandes ---------- */

.sim-cmdlist details{
  border:1px solid var(--line); border-radius:8px; background:var(--bg-panel); margin-bottom:8px;
}
.sim-cmdlist summary{
  cursor:pointer; padding:10px 14px; font-weight:600; font-size:0.88rem; color:var(--accent-cyan);
  list-style:none;
}
.sim-cmdlist summary::-webkit-details-marker{ display:none; }
.sim-cmdlist summary::before{ content:'▸ '; color:var(--ink-dim); }
.sim-cmdlist details[open] summary::before{ content:'▾ '; }
.sim-cmdlist .cmd-group{ padding:0 14px 12px; }
.sim-cmdlist table{ width:100%; border-collapse:collapse; font-size:0.8rem; }
.sim-cmdlist td{ padding:3px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.sim-cmdlist td.c{ font-family:'IBM Plex Mono'; color:var(--accent-green); white-space:nowrap; }
.sim-cmdlist td.h{ color:var(--ink-dim); }