/* An illustrative access-point failover topology, scoped to its own mount. */
.ap-network-view { width: 100%; min-width: 0; }
.ap-network-view[hidden] { display: none !important; }
.ap-network-view .ap-diagram-card {
  width: 100%;
  padding: 10px 11px 11px;
  overflow: hidden;
  border: 1px solid #2b415d;
  border-radius: 6px;
  background: #0a1728;
}
.ap-network-view .ap-topology { display: block; width: 100%; max-width: 100%; height: auto; max-height: 200px; overflow: hidden; }
.ap-network-view .ap-topology text { font-family: var(--font, Manrope, Arial, sans-serif); }
.ap-network-view .ap-floor-plan { fill: none; stroke: #233751; stroke-width: .8; opacity: .65; }
.ap-network-view .ap-coverage-neighbor ellipse { transition: rx 1300ms cubic-bezier(.22,.61,.36,1), ry 1300ms cubic-bezier(.22,.61,.36,1), opacity 700ms ease; }
.ap-network-view .ap-coverage-outer { fill: #2462a3; fill-opacity: .065; stroke: #5a93cb; stroke-opacity: .3; stroke-width: 1; stroke-dasharray: 3 6; }
.ap-network-view .ap-coverage-inner { fill: #2e6cae; fill-opacity: .075; stroke: #568abb; stroke-opacity: .22; stroke-width: .8; }
.ap-network-view .ap-coverage-faulty { opacity: 1; transition: opacity 600ms ease; }
.ap-network-view .ap-fault-field { fill: #b38242; fill-opacity: .035; stroke: #c89558; stroke-opacity: .22; stroke-width: 1; stroke-dasharray: 3 7; }
.ap-network-view .ap-fault-field.inner { fill-opacity: .02; stroke-opacity: .14; }
.ap-network-view .ap-failed-routes { opacity: 1; transition: opacity 650ms ease; }
.ap-network-view .ap-failed-routes > path { fill: none; stroke: #cf9c61; stroke-width: 1.5; stroke-dasharray: 3 6; opacity: .75; }
.ap-network-view .ap-retry-mark circle { fill: #152135; stroke: #d0a56f; stroke-width: 1; }
.ap-network-view .ap-retry-mark path { fill: none; stroke: #e2b47b; stroke-width: 1.2; stroke-linecap: round; }
.ap-network-view .ap-alternate-tracks { opacity: 0; transition: opacity 850ms ease; }
.ap-network-view .ap-alternate-tracks path { fill: none; stroke: #6494c5; stroke-width: 1.5; stroke-dasharray: 4 5; }
.ap-network-view .ap-serving-routes { opacity: 0; transition: opacity 900ms ease; }
.ap-network-view .ap-serving-routes path { fill: none; stroke: #84c0ff; stroke-width: 2.3; stroke-linecap: round; }
.ap-network-view .ap-serving-routes circle { fill: #d1eeff; stroke: #4f8ac5; stroke-width: .8; }
.ap-network-view .ap-node .ap-id { fill: #b9d0ed; font-size: 11.5px; font-weight: 650; letter-spacing: .05em; }
.ap-network-view .ap-hardware { fill: #122942; stroke: #789fc9; stroke-width: 1.4; transition: fill 650ms ease, stroke 650ms ease; }
.ap-network-view .ap-hardware-center { fill: none; stroke: #638bb5; stroke-width: 1; transition: stroke 650ms ease; }
.ap-network-view .ap-led { fill: none; stroke: #8cbef2; stroke-width: 2; stroke-linecap: round; transition: stroke 650ms ease; }
.ap-network-view .ap-radio { fill: none; stroke: #709bc7; stroke-width: 1.2; stroke-linecap: round; opacity: .75; transition: opacity 650ms ease, stroke 650ms ease; }
.ap-network-view .ap-node-state { fill: #8ca6c7; font-size: 9.3px; font-weight: 500; }
.ap-network-view .ap-node-faulty .ap-hardware { fill: #2c2830; stroke: #d8aa70; }
.ap-network-view .ap-node-faulty .ap-hardware-center,
.ap-network-view .ap-node-faulty .ap-radio,
.ap-network-view .ap-node-faulty .ap-led { stroke: #d6a46a; }
.ap-network-view .ap-node-faulty .ap-node-state { fill: #deb984; }
.ap-network-view .ap-warning-mark circle,
.ap-network-view .ap-inspect-mark > circle:first-child { fill: #2b2830; stroke: #d8ab73; stroke-width: 1; }
.ap-network-view .ap-warning-mark text { fill: #f5d4a0; font-size: 10px; font-weight: 700; }
.ap-network-view .ap-inspect-mark { opacity: 0; }
.ap-network-view .ap-inspect-mark .ap-magnifier,
.ap-network-view .ap-inspect-mark path { fill: none; stroke: #f0cd97; stroke-width: 1.15; stroke-linecap: round; }
.ap-network-view .ap-isolation-mark { opacity: 0; }
.ap-network-view .ap-isolation-mark circle { fill: #182334; stroke: #7a8ca4; stroke-width: 1; }
.ap-network-view .ap-isolation-mark path { fill: none; stroke: #bac8d9; stroke-width: 1.2; stroke-linecap: round; }
.ap-network-view .ap-client-shell { fill: #0c1a2c; stroke: #7c91ac; stroke-width: 1.3; transition: stroke 650ms ease, fill 650ms ease; }
.ap-network-view .ap-client-base { fill: #13253b; stroke: #7c91ac; stroke-width: 1; transition: stroke 650ms ease; }
.ap-network-view .ap-phone-detail { fill: none; stroke: #7590af; stroke-width: 1; stroke-linecap: round; }
.ap-network-view .ap-client-light { fill: #d5a164; transition: fill 650ms ease; }
.ap-network-view .ap-client text { fill: #abc2df; font-size: 10.5px; font-weight: 550; }
.ap-network-view .ap-dispatch-badge { opacity: 0; transition: opacity 700ms ease; }
.ap-network-view .ap-dispatch-badge rect { fill: #152a41; stroke: #4e7198; stroke-width: .8; }
.ap-network-view .ap-dispatch-badge text { fill: #bdd4ee; font-size: 9.3px; font-weight: 600; }
.ap-network-view .ap-wrench { fill: none; stroke: #a4c9ee; stroke-width: 1.1; stroke-linejoin: round; }
.ap-network-view .ap-diagram-caption { display: flex; align-items: flex-start; gap: 7px; min-height: 31px; margin: 7px 2px 0; }
.ap-network-view .ap-caption-dot { flex: 0 0 4px; width: 4px; height: 4px; margin-top: 6px; border-radius: 50%; background: #dab079; transition: background 650ms ease; }
.ap-network-view .ap-diagram-caption p { color: #9db4d1; font-size: 9px; line-height: 1.7; margin: 0; }

.ap-network-view[data-ap-stage="1"] .ap-warning-mark { opacity: 0; }
.ap-network-view[data-ap-stage="1"] .ap-inspect-mark { opacity: 1; }
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-coverage-faulty,
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-node-faulty .ap-radio,
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-warning-mark,
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-inspect-mark { opacity: 0; }
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-isolation-mark { opacity: 1; }
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-node-faulty .ap-hardware { fill: #182332; stroke: #566780; }
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-node-faulty .ap-hardware-center { stroke: #596b83; }
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-node-faulty .ap-led { stroke: #3c4c63; }
.ap-network-view:is([data-ap-stage="2"],[data-ap-stage="3"],[data-ap-stage="4"],[data-ap-stage="5"]) .ap-node-faulty .ap-node-state { fill: #96a6be; }
.ap-network-view[data-ap-stage="2"] .ap-failed-routes { opacity: .25; }
.ap-network-view[data-ap-expanded="true"] .ap-failed-routes { opacity: 0; }
.ap-network-view[data-ap-expanded="true"] .ap-coverage-outer { fill-opacity: .09; stroke-opacity: .48; }
.ap-network-view[data-ap-expanded="true"] .ap-coverage-inner { fill-opacity: .10; stroke-opacity: .38; }
.ap-network-view[data-ap-expanded="true"] .ap-node-healthy .ap-radio { stroke: #a1d0ff; opacity: 1; }
.ap-network-view[data-ap-expanded="true"] .ap-node-healthy .ap-node-state { fill: #add0f4; }
.ap-network-view[data-ap-expanded="true"] .ap-alternate-tracks { opacity: .65; }
.ap-network-view[data-ap-expanded="true"] .ap-caption-dot { background: #8ebff5; }
.ap-network-view[data-ap-online="true"] .ap-alternate-tracks { opacity: 0; }
.ap-network-view[data-ap-online="true"] .ap-serving-routes { opacity: 1; }
.ap-network-view[data-ap-online="true"] .ap-node-healthy .ap-hardware { fill: #173a5c; stroke: #a0d1ff; }
.ap-network-view[data-ap-online="true"] .ap-node-healthy .ap-led { stroke: #c5eaff; }
.ap-network-view[data-ap-online="true"] .ap-client-shell { fill: #14304b; stroke: #9ac8f5; }
.ap-network-view[data-ap-online="true"] .ap-client-base { stroke: #a0caf2; }
.ap-network-view[data-ap-online="true"] .ap-client-light { fill: #bde6ff; }
.ap-network-view[data-ap-stage="5"] .ap-dispatch-badge { opacity: 1; }
@media (max-width: 480px) {
  .ap-network-view .ap-diagram-card { padding: 9px 7px 10px; }
  .ap-network-view .ap-diagram-caption { min-height: 42px; margin-top: 6px; }
  .ap-network-view .ap-diagram-caption p { font-size: 9px; line-height: 1.7; }
  .ap-network-view .ap-id { font-size: 12px; }
  .ap-network-view .ap-node-state { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-network-view,
  .ap-network-view * { animation: none !important; transition: none !important; }
}