export const TOPOLOGY_STYLES = `
  .topology-edge-animated {
    animation: topology-dash 1.2s linear infinite;
  }
  @keyframes topology-dash {
    to { stroke-dashoffset: -20; }
  }

  .topology-controls {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
  }
  .topology-controls button {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: transparent !important;
    color: #94a3b8 !important;
    width: 26px !important;
    height: 26px !important;
  }
  .topology-controls button:last-child { border-bottom: none !important; }
  .topology-controls button:hover { background: #f8fafc !important; color: #475569 !important; }
  .topology-controls button svg { max-width: 12px !important; max-height: 12px !important; }

  .topology-minimap {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    overflow: hidden !important;
  }
  .topology-minimap svg { background-color: transparent !important; }

  :where(.dark, .dark *) .topology-controls { border-color: #334155 !important; background: #0f172a !important; }
  :where(.dark, .dark *) .topology-controls button { border-color: #1e293b !important; color: #64748b !important; }
  :where(.dark, .dark *) .topology-controls button:hover { background: #1e293b !important; color: #cbd5e1 !important; }

  :where(.dark, .dark *) .topology-minimap { border-color: #334155 !important; background-color: #0f172a !important; }

  .react-flow__node { cursor: pointer !important; }
  .react-flow__node-columnLabel { pointer-events: none !important; cursor: default !important; }
  .react-flow { background: #f8fafc !important; }
  :where(.dark, .dark *) .react-flow { background: #0c1322 !important; }
`
