/* Infrastructure Canvas and Detection Workflow editor */
.topology-heading { align-items: flex-end; }
.topology-heading-actions, .workflow-header-actions { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.compact-field { display: grid; gap: 4px; color: var(--slate); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.compact-field input, .compact-field select { min-width: 112px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; outline: none; }
.compact-field input:focus, .compact-field select:focus, .topology-search:focus, .topology-inspector input:focus, .topology-inspector select:focus, .topology-inspector textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,196,0,.14); }
.button-primary, .button-secondary, .button-danger { min-height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 850; transition: .2s ease; }
.button-primary { border: 1px solid #e0ae00; background: linear-gradient(110deg, #ffc400, #ffe06b); color: #28220d; box-shadow: 0 6px 16px rgba(190,136,0,.17); }
.button-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(190,136,0,.24); }
.button-secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.button-secondary:hover { border-color: #d5aa12; background: #fffaf0; }
.button-danger { border: 1px solid rgba(226,59,59,.25); background: #fff6f6; color: #b83232; }
.button-danger:hover { background: #ffe7e7; border-color: rgba(226,59,59,.5); }
.topology-tabs { display: flex; gap: 5px; margin: 0 0 13px; padding: 4px; width: fit-content; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.topology-tabs button { border: 0; border-radius: 8px; padding: 9px 13px; background: transparent; color: var(--slate); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.topology-tabs button.active { background: #fff5c9; color: #775200; box-shadow: inset 0 0 0 1px rgba(224,174,0,.24); }
.topology-workbench, .workflow-workbench { display: grid; grid-template-columns: 208px minmax(420px, 1fr) 238px; gap: 13px; min-height: 645px; }
.topology-palette, .topology-inspector, .workflow-palette, .workflow-inspector { padding: 14px; }
.topology-panel-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.topology-panel-title .eyebrow { margin: 0 0 3px; font-size: 9px; }
.topology-panel-title h2 { margin: 0; font-size: 14px; }
.topology-panel-title .count-pill { padding: 5px 8px; font-size: 10px; }
.topology-help { margin: 12px 0; color: var(--slate); font-size: 11px; line-height: 1.5; }
.topology-search { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: #fbfcfd; color: var(--ink); font: inherit; font-size: 11px; }
.topology-kind-list, .workflow-kind-list { display: grid; gap: 6px; margin-top: 10px; max-height: 462px; overflow: auto; padding-right: 2px; }
.topology-kind, .workflow-kind { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 8px; width: 100%; padding: 7px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.topology-kind:hover, .workflow-kind:hover { border-color: rgba(224,174,0,.4); background: #fffaf0; }
.topology-kind-icon, .workflow-kind-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: #f1f3f6; color: #566070; font-size: 9px; font-weight: 900; letter-spacing: -.04em; }
.topology-kind[data-category="security"] .topology-kind-icon, .workflow-kind[data-type="approval"] .workflow-kind-icon, .workflow-kind[data-type="response"] .workflow-kind-icon { background: #fff0d9; color: #a96800; }
.topology-kind[data-category="data"] .topology-kind-icon { background: #e9f3ff; color: #3a6caa; }
.topology-kind[data-category="network"] .topology-kind-icon { background: #eaf8f2; color: #21865e; }
.topology-kind[data-category="application"] .topology-kind-icon { background: #f3edff; color: #7551aa; }
.topology-kind-label, .workflow-kind-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 750; }
.topology-kind-label small, .workflow-kind-label small { display: block; margin-top: 1px; color: var(--slate); font-size: 9px; font-weight: 500; }
.topology-legend { display: grid; gap: 7px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--slate); font-size: 9px; }
.topology-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; background: #aab3bf; }
.legend-dot.app { background: #8d6bd3; } .legend-dot.data { background: #4f96dd; } .legend-dot.network { background: #31aa76; } .legend-dot.security { background: #eca52b; }
.topology-canvas-card { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; }
.topology-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 9px; min-height: 52px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fff; }
.topology-mode-buttons, .topology-zoom { display: flex; align-items: center; gap: 4px; }
.topology-mode-buttons button, .topology-zoom button { min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--slate); cursor: pointer; font: inherit; font-size: 10px; font-weight: 800; }
.topology-mode-buttons button:hover, .topology-zoom button:hover { background: #f4f6f8; color: var(--ink); }
.topology-mode-buttons button.active { border-color: rgba(224,174,0,.28); background: #fff5c9; color: #775200; }
.topology-zoom { padding-left: 8px; border-left: 1px solid var(--line); }
.topology-zoom button { min-width: 29px; padding: 0 6px; }
.topology-zoom span { min-width: 39px; color: var(--slate); text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; }
.topology-canvas { position: relative; flex: 1; min-height: 550px; overflow: hidden; isolation: isolate; background-color: #f8fafc; background-image: radial-gradient(circle, rgba(143,154,169,.34) 1px, transparent 1px), linear-gradient(135deg, rgba(255,196,0,.025), transparent 50%); background-size: 22px 22px, 100% 100%; cursor: default; }
.topology-canvas.connect-mode { cursor: crosshair; }
.topology-edge-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.topology-edge-svg line { stroke: #9ba8b7; stroke-width: 2; stroke-linecap: round; marker-end: url(#topologyArrow); vector-effect: non-scaling-stroke; }
.topology-edge-svg line:hover { stroke: #d7a900; stroke-width: 3; }
.topology-edge-svg text { fill: #7b8794; font-size: 10px; font-weight: 700; }
.topology-node-layer { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; }
.topology-node { position: absolute; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 8px; width: 154px; min-height: 59px; padding: 8px; border: 1px solid #d6dce4; border-radius: 11px; background: rgba(255,255,255,.96); box-shadow: 0 7px 18px rgba(34,45,60,.1), 0 1px 2px rgba(34,45,60,.06); user-select: none; touch-action: none; cursor: grab; }
.topology-node:active { cursor: grabbing; }
.topology-node.selected { border-color: #d7aa16; box-shadow: 0 0 0 3px rgba(255,196,0,.2), 0 9px 22px rgba(34,45,60,.13); }
.topology-node.connect-source { border-color: #3da97c; box-shadow: 0 0 0 3px rgba(49,170,118,.18), 0 9px 22px rgba(34,45,60,.13); }
.topology-node[data-category="security"] .topology-node-icon { background: #fff0d9; color: #a96800; }
.topology-node[data-category="data"] .topology-node-icon { background: #e9f3ff; color: #3a6caa; }
.topology-node[data-category="network"] .topology-node-icon { background: #eaf8f2; color: #21865e; }
.topology-node[data-category="application"] .topology-node-icon { background: #f3edff; color: #7551aa; }
.topology-node[data-kind="central"] { border-color: #d7aa16; background: linear-gradient(135deg, #fffdf2, #fff7d2); box-shadow: 0 0 0 3px rgba(255,196,0,.14), 0 10px 24px rgba(167,125,0,.2); }
.topology-node[data-kind="central"] .topology-node-icon { background: #ffc400; color: #3a2a00; box-shadow: inset 0 0 0 1px rgba(123,83,0,.18); }
.topology-node[data-kind="central"] .topology-node-copy strong { color: #624600; }
.topology-node-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: #f1f3f6; color: #566070; font-size: 8px; font-weight: 900; }
.topology-node-copy { min-width: 0; }
.topology-node-copy strong, .topology-node-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topology-node-copy strong { font-size: 11px; }
.topology-node-copy small { margin-top: 3px; color: var(--slate); font-size: 9px; }
.topology-node-status { position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #aab3bf; }
.topology-node-status.healthy { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,106,.12); }
.topology-node-status.monitoring { background: #e5a30e; }
.topology-node-status.degraded { background: #e77328; }
.topology-node-status.offline { background: var(--red); }
.topology-canvas-empty { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(290px,80%); transform: translate(-50%,-50%); display: grid; gap: 6px; place-items: center; color: #7b8794; text-align: center; pointer-events: none; }
.topology-canvas-empty span { display: grid; place-items: center; width: 45px; height: 45px; border: 1px dashed #c5ccd5; border-radius: 14px; color: #c08e00; font-size: 22px; }
.topology-canvas-empty strong { color: #596575; font-size: 13px; }
.topology-canvas-empty small { font-size: 10px; line-height: 1.5; }
.topology-canvas-footer { display: flex; justify-content: space-between; gap: 10px; min-height: 34px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--slate); font-size: 9px; }
.topology-canvas-footer span:first-child { color: #80600a; font-weight: 800; }
.topology-inspector { min-width: 0; }
.inspector-state { margin-top: 2px; color: var(--slate); font-size: 9px; }
.topology-inspector-empty { margin: 25px 3px; color: var(--slate); font-size: 11px; line-height: 1.65; }
.topology-inspector form { display: grid; gap: 11px; margin-top: 17px; }
.topology-inspector label { display: grid; gap: 5px; color: #4b5565; font-size: 10px; font-weight: 800; }
.topology-inspector input, .topology-inspector select, .topology-inspector textarea { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; outline: none; resize: vertical; background: #fbfcfd; color: var(--ink); font: inherit; font-size: 11px; }
.topology-inspector-actions { display: flex; justify-content: space-between; gap: 8px; padding-top: 3px; }
.topology-inspector-tip, .workflow-execution-note { display: grid; gap: 4px; margin-top: 24px; padding: 10px; border: 1px solid rgba(224,174,0,.25); border-radius: 10px; background: #fffaf0; color: #77612a; font-size: 9px; line-height: 1.5; }
.topology-inspector-tip strong, .workflow-execution-note strong { color: #735000; font-size: 10px; }
.workflow-kind-list { max-height: none; }
.workflow-kind { grid-template-columns: 34px minmax(0,1fr); }
.workflow-kind[data-type="trigger"] .workflow-kind-icon { background: #eaf8f2; color: #21865e; }
.workflow-kind[data-type="filter"] .workflow-kind-icon, .workflow-kind[data-type="correlate"] .workflow-kind-icon { background: #e9f3ff; color: #3a6caa; }
.workflow-kind[data-type="ai"] .workflow-kind-icon { background: #f3edff; color: #7551aa; }
.workflow-kind[data-type="notify"] .workflow-kind-icon { background: #f1f3f6; color: #566070; }
.workflow-header-actions { align-items: center; }
.workflow-header-actions .compact-field { display: flex; align-items: center; gap: 5px; }
.workflow-header-actions .compact-field select { min-width: 145px; }
.workflow-canvas { min-height: 550px; }
.workflow-node { width: 170px; }
.workflow-node .topology-node-icon { border-radius: 50%; }
.workflow-node[data-type="approval"] { border-color: #e4be54; }
.workflow-node[data-type="response"] { border-color: #eea1a1; }
.workflow-node[data-type="ai"] { border-color: #bd9fe5; }
@media (max-width: 1400px) {
  .topology-workbench, .workflow-workbench { grid-template-columns: 190px minmax(380px, 1fr) 220px; }
  .topology-node { width: 145px; }
}
@media (max-width: 1120px) {
  .topology-workbench, .workflow-workbench { grid-template-columns: 190px minmax(0, 1fr); }
  .topology-inspector, .workflow-inspector { grid-column: 1 / -1; }
  .topology-inspector form, .workflow-inspector form { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: end; }
  .topology-inspector-empty { margin: 12px 0; }
  .topology-inspector-tip { margin-top: 12px; }
}
@media (max-width: 760px) {
  .topology-heading { display: grid; }
  .topology-heading-actions { justify-content: flex-start; }
  .topology-workbench, .workflow-workbench { display: flex; flex-direction: column; min-height: 0; }
  .topology-palette, .workflow-palette { order: 2; }
  .topology-canvas-card { order: 1; min-height: 590px; }
  .topology-inspector, .workflow-inspector { order: 3; }
  .topology-kind-list { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 225px; }
  .topology-inspector form, .workflow-inspector form { grid-template-columns: 1fr; }
  .topology-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .workflow-header-actions { width: 100%; justify-content: flex-start; }
}