.topo-tab { padding: 0; height: 100%; display: flex; flex-direction: column; }

/* Palette VLAN : hérite de palette.css (--v1..--v6 globaux) + --v*-bg locaux */
.topo-tab {
  --v1-bg: rgba(var(--v1-rgb), .12);
  --v2-bg: rgba(var(--v2-rgb), .09);
  --v3-bg: rgba(var(--v3-rgb), .08);
  --v4-bg: rgba(var(--v4-rgb), .08);
  --v5-bg: rgba(var(--v5-rgb), .08);
  --v6-bg: rgba(var(--v6-rgb), .08);
  --up:    #4ade80;
  --down:  #ef4444;
  --warn:  #fb923c;
  --unknw: #64748b;
}

.topo-toolbar {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .55rem .9rem;
  background: rgba(24, 24, 27, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(24px) saturate(180%);
}
.topo-toolbar .topo-title { color: var(--p-base); font-weight: 600; font-size: .85rem; font-family: 'Menlo', 'Consolas', monospace; text-transform: uppercase; letter-spacing: .08em; }
.topo-toolbar .topo-generated { color: #64748b; font-size: .72rem; font-family: 'Menlo', 'Consolas', monospace; }
.topo-toolbar label { font-size: .82rem; color: #d4d4d8; display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.topo-toolbar button { background: rgba(39, 39, 42, .45); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; padding: .22rem .55rem; font-size: .8rem; cursor: pointer; }
.topo-toolbar button:hover { background: rgba(63, 63, 70, .65); border-color: rgba(var(--p-base-rgb), .3); }

.topo-canvas {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.topo-empty { color: #64748b; font-style: italic; text-align: center; padding: 2rem 0; }

/* ===== Arbre haut : Internet → Box → Routeur → (Switch + WiFi) ===== */
.topo-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: .4rem 0 .6rem;
}

/* SVG overlay canvas-wide : couvre tree + VLANs pour dessiner toutes les connexions */
.topo-connectors {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%;
}
.vlan-card { position: relative; z-index: 2; }

/* topo-node — chrome .card-pri (ref design Vincent 2026-04-29).
   --p-base par défaut, vert si up, rouge si down. */
.topo-node {
  --card-rgb: var(--p-base-rgb);
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .55rem .9rem;
  min-width: 240px;
  max-width: 320px;
  border-radius: 8px;
  border-top:    1px solid rgba(var(--card-rgb), .4);
  border-right:  1px solid rgba(var(--card-rgb), .4);
  border-bottom: 1px solid rgba(var(--card-rgb), .4);
  border-left:   2px solid rgba(var(--card-rgb), .9);
  background:
    radial-gradient(circle at top right, rgba(var(--card-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--card-rgb), .1) 0%, rgba(var(--card-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: inset 8px 0 14px -8px rgba(var(--card-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 18px rgba(0, 0, 0, .28);
}
.topo-node.up   { --card-rgb: var(--c-state-notif-rgb); }
.topo-node.down { --card-rgb: var(--c-state-alarm-rgb); }

.topo-node .n-icon {
  font-size: 1.3rem;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 0 4px rgba(var(--p-glow-rgb), .3));
}
.topo-node .n-body { display: flex; flex-direction: column; min-width: 0; gap: .15rem; }
.topo-node .n-name { color: #e4e4e7; font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-node .n-name > .n-label { overflow: hidden; text-overflow: ellipsis; }
.topo-node .n-role { color: #94a3b8; font-size: .7rem; font-family: 'Menlo', 'Consolas', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-node .n-ip   { color: var(--p-light); font-size: .72rem; font-family: 'Menlo', 'Consolas', monospace; }
.topo-node .n-ping { font-family: 'Menlo', 'Consolas', monospace; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.topo-node .n-ping.up      { color: var(--up); }
.topo-node .n-ping.down    { color: var(--down); }
.topo-node .n-ping.unknown { color: var(--unknw); }

/* Fork : Switch + AiMesh sous Routeur — wrapper flex */
.topo-fork {
  display: flex;
  gap: 2.5rem;
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
/* Les WiFi satellites (mini-nodes sous AiMesh) */
.topo-wifi-sats {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .4rem;
}
.topo-wifi-sats .sat {
  display: flex;
  gap: .3rem;
  align-items: center;
  font-size: .7rem;
  font-family: 'Menlo', 'Consolas', monospace;
  color: #94a3b8;
  padding-left: .7rem;
  border-left: 1px dashed rgba(255, 255, 255, .15);
}
.topo-wifi-sats .sat .sat-ip { color: var(--p-light); }
.topo-wifi-sats .sat.status-down    { color: #94a3b8; }
.topo-wifi-sats .sat.status-unknown { color: #64748b; opacity: .7; }

/* ===== Grille VLANs ===== */
.topo-vlans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .7rem;
  padding: .5rem 0;
  position: relative;
  margin-top: 24px;
}

/* Card VLAN — chrome .card-pri (ref design Vincent 2026-04-29)
   EXCEPTION : toute la carte porte la couleur VLAN (pas --p-base) — sémantique VLAN dominante. */
.vlan-card {
  --card-rgb: var(--v1-rgb);   /* fallback si pas de classe vlan-X */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-top:    1px solid rgba(var(--card-rgb), .4);
  border-right:  1px solid rgba(var(--card-rgb), .4);
  border-bottom: 1px solid rgba(var(--card-rgb), .4);
  border-left:   3px solid rgba(var(--card-rgb), .9);
  background:
    radial-gradient(circle at top right, rgba(var(--card-rgb), .14), transparent 60%),
    linear-gradient(135deg, rgba(var(--card-rgb), .1) 0%, rgba(var(--card-rgb), .03) 50%, rgba(24, 24, 27, .55) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: inset 8px 0 14px -8px rgba(var(--card-rgb), .55), inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 18px rgba(0, 0, 0, .28);
  transition: box-shadow .15s;
}
.vlan-card:hover  { box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.vlan-card.vlan-1 { --card-rgb: var(--v1-rgb); }
.vlan-card.vlan-2 { --card-rgb: var(--v2-rgb); }
.vlan-card.vlan-3 { --card-rgb: var(--v3-rgb); }
.vlan-card.vlan-4 { --card-rgb: var(--v4-rgb); }
.vlan-card.vlan-5 { --card-rgb: var(--v5-rgb); }
.vlan-card.vlan-6 { --card-rgb: var(--v6-rgb); }

.vlan-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: .4rem;
  align-items: center;
  padding: .5rem .7rem;
  cursor: pointer;
  user-select: none;
  background: rgba(0, 0, 0, .2);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background .1s;
}
.vlan-head:hover { background: rgba(255, 255, 255, .04); }
.vlan-head .v-chev { font-size: .7rem; color: #94a3b8; transition: transform .15s; width: 10px; }
.vlan-card.collapsed .v-chev { transform: rotate(-90deg); }
.vlan-head .v-id {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .72rem;
  padding: .08rem .4rem;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .04em;
}
.vlan-card.vlan-1 .v-id { background: var(--v1-bg); color: var(--v1); border: 1px solid var(--v1); }
.vlan-card.vlan-2 .v-id { background: var(--v2-bg); color: var(--v2); border: 1px solid var(--v2); }
.vlan-card.vlan-3 .v-id { background: var(--v3-bg); color: var(--v3); border: 1px solid var(--v3); }
.vlan-card.vlan-4 .v-id { background: var(--v4-bg); color: var(--v4); border: 1px solid var(--v4); }
.vlan-card.vlan-5 .v-id { background: var(--v5-bg); color: var(--v5); border: 1px solid var(--v5); }
.vlan-card.vlan-6 .v-id { background: var(--v6-bg); color: var(--v6); border: 1px solid var(--v6); }
.vlan-head .v-name { color: #e4e4e7; font-weight: 600; font-size: .88rem; }
.vlan-head .v-stats {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .78rem;
  font-weight: 600;
  color: #64748b;
  text-align: right;
  display: flex;
  gap: 0;
  white-space: nowrap;
}
.vlan-head .v-stats .s-up   { color: var(--up); }
.vlan-head .v-stats .s-down { color: var(--down); }
.vlan-head .v-stats .s-warn { color: var(--warn); }
.vlan-head .v-stats .s-unk  { color: var(--unknw); }
.vlan-head .v-stats .s-sep  { color: #475569; font-weight: 400; margin: 0; }
.vlan-head .v-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vlan-card.status-up   .v-name::after  { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: .4rem; border-radius: 50%; background: var(--up); box-shadow: 0 0 6px var(--up); vertical-align: baseline; }
.vlan-card.status-down .v-name::after  { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: .4rem; border-radius: 50%; background: var(--down); box-shadow: 0 0 6px var(--down); vertical-align: baseline; }
.vlan-card.status-warn .v-name::after  { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: .4rem; border-radius: 50%; background: var(--warn); box-shadow: 0 0 6px var(--warn); vertical-align: baseline; }
.vlan-card.status-empty .v-name::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: .4rem; border-radius: 50%; background: var(--unknw); vertical-align: baseline; }

.vlan-nodes { list-style: none; margin: 0; padding: .2rem 0; display: flex; flex-direction: column; gap: 0; }
.vlan-card.collapsed .vlan-nodes { display: none; }

.vlan-nodes li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .5rem;
  padding: .28rem .7rem;
  align-items: center;
  font-size: .8rem;
  cursor: help;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
  transition: background .1s;
}
.vlan-nodes li:last-child { border-bottom: none; }
.vlan-nodes li:hover { background: rgba(var(--p-base-rgb), .05); }
.vlan-nodes li[data-node-id] { cursor: pointer; }
.topo-node[data-node-id] { cursor: pointer; }
/* Ligne down : nom estompé */
.vlan-nodes li.status-down .n-label    { color: #94a3b8; }
.vlan-nodes li.status-unknown .n-label { color: #64748b; opacity: .7; }

/* Indicateur éditable (icône crayon au hover) */
.vlan-nodes li[data-node-id]:hover .n-nm::after,
.topo-node[data-node-id]:hover .n-name::after {
  content: '✎';
  margin-left: .5rem;
  color: var(--p-base);
  font-size: .7rem;
  opacity: .7;
}
.topo-node[data-node-id]:hover {
  border-color: rgba(var(--p-base-rgb), .35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .25), 0 0 14px rgba(var(--p-glow-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.vlan-nodes .n-nm { color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: .3rem; min-width: 0; }
.vlan-nodes .n-nm > span:not(.ssh-chip) { overflow: hidden; text-overflow: ellipsis; }

/* ===== Chip SSH ===== */
.ssh-chip {
  display: inline-block;
  font-size: .56rem;
  font-family: 'Menlo', 'Consolas', monospace;
  padding: 0 .3rem;
  border-radius: 3px;
  border: 1px solid;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.5;
  flex-shrink: 0;
}
.ssh-chip.ssh-active { color: var(--v1); background: rgba(var(--v1-rgb), .12); border-color: var(--v1); }
.ssh-chip.ssh-had    { color: var(--v2); background: rgba(var(--v2-rgb), .10); border-color: var(--v2); }
.ssh-chip.ssh-never  { color: #64748b;   background: rgba(100, 116, 139, .08); border-color: rgba(100, 116, 139, .4); opacity: .75; }

/* ===== Icône type de lien (ethernet / wifi) ===== */
.link-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  vertical-align: middle;
}
.link-icon.link-eth  { color: var(--v4); }  /* vert = filaire */
.link-icon.link-wifi { color: var(--v5); }  /* violet = sans-fil */
.topo-node .n-name .ssh-chip { margin-right: .35rem; vertical-align: middle; }
.vlan-nodes .n-pingp { font-family: 'Menlo', 'Consolas', monospace; font-size: .7rem; font-weight: 600; }
.vlan-nodes .n-pingp.up    { color: var(--up); }
.vlan-nodes .n-pingp.down  { color: var(--down); }
.vlan-nodes .n-pingp.unknown { color: var(--unknw); }

/* ===== WiFi column (AiMesh + sats + guest) ===== */
.topo-wifi-col { display: flex; flex-direction: column; gap: .4rem; }
.topo-wifi-sats .sat.guest { border-left-color: var(--v5); color: #cbd5e1; }
.topo-wifi-sats .sat { cursor: help; transition: color .1s; }
.topo-wifi-sats .sat:hover { color: var(--p-pale); }

/* ===== Tooltip custom (glass) ===== */
.topo-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  min-width: 180px;
  max-width: 320px;
  padding: .6rem .8rem;
  background: rgba(24, 24, 27, .92);
  border: 1px solid rgba(var(--p-base-rgb), .35);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 14px rgba(var(--p-glow-rgb), .15);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  font-size: .76rem;
  color: #d4d4d8;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.topo-tooltip[hidden] { display: none; }
.topo-tooltip .tt-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--p-base);
  padding-bottom: .3rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid rgba(var(--p-base-rgb), .2);
}
.topo-tooltip .tt-role { color: #a1a1aa; font-style: italic; font-size: .72rem; margin-bottom: .2rem; }
.topo-tooltip .tt-k { color: #64748b; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; display: inline-block; min-width: 44px; }
.topo-tooltip .tt-v { color: #e4e4e7; }
.topo-tooltip .tt-v.mono { font-family: 'Menlo', 'Consolas', monospace; color: var(--p-light); }
.topo-tooltip .tt-v.tt-up      { color: var(--up); font-weight: 600; }
.topo-tooltip .tt-v.tt-down    { color: var(--down); font-weight: 600; }
.topo-tooltip .tt-v.tt-unknown { color: var(--unknw); }
.topo-tooltip .tt-v.tt-info    { color: var(--v3); font-weight: 600; }
.topo-tooltip .tt-note { color: #94a3b8; font-size: .7rem; margin-top: .3rem; padding-top: .3rem; border-top: 1px dashed rgba(255, 255, 255, .1); font-style: italic; }

/* ===================================================================
   RESPONSIVE MOBILE (A3a) — strictement scope @media (max-width: 768px)
   AUCUN impact sur PC ≥ 769px.
   =================================================================== */
@media (max-width: 768px) {
  .topo-tab { height: auto; padding: 0; }

  /* Toolbar : wrap mobile */
  .topo-toolbar {
    flex-wrap: wrap;
    gap: .35rem;
    padding: .4rem .5rem;
  }
  .topo-toolbar .topo-title { font-size: .75rem; letter-spacing: .06em; }
  .topo-toolbar .topo-generated { font-size: .65rem; }
  .topo-toolbar label { font-size: .72rem; margin-left: 0; }
  .topo-toolbar button { padding: .2rem .45rem; font-size: .72rem; }

  /* Canvas : scroll horizontal natif si l'arbre est plus large que l'écran */
  .topo-canvas {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: .35rem;
  }

  /* Tooltip : repositionnée pour ne pas déborder écran */
  .topo-tooltip {
    max-width: 90vw;
    font-size: .8rem;
  }
}

/* ============================================================================
   STANDARD TOOLBAR — uniforme reference Biometrie sante (Vincent 2026-05-10)
   Principle DB #102 — zone figee + controls coherents inter-tabs et inter-VMs.
   ============================================================================ */
.topo-toolbar {
  min-height: 3.15rem !important;
  box-sizing: border-box !important;
}
.topo-toolbar input[type="search"],
.topo-toolbar input[type="text"],
.topo-toolbar input[type="date"],
.topo-toolbar input[type="number"],
.topo-toolbar select,
.topo-toolbar button.t-btn {
  background: rgba(39, 39, 42, .45);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  padding: .22rem .55rem;
  font-size: .82rem;
  font-family: 'Menlo','Consolas',monospace;
  height: 28px;
  box-sizing: border-box;
  line-height: 1.2;
}
.topo-toolbar button.t-btn:hover:not(:disabled) {
  background: rgba(var(--p-base-rgb), .18);
  color: var(--p-base);
  border-color: rgba(var(--p-base-rgb), .35);
}
.topo-toolbar label {
  font-size: .82rem;
  color: #d4d4d8;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1.2;
}