.wcm-view-toggle { margin: 10px 0 15px; }
.wcm-view-toggle .button.is-active { background: #2271b1; color: #fff; }

.wcm-graph-container { background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; padding: 10px; display:flex; flex-direction:column; min-height: 400px; }
#wcm-graph-svg { background: #fafafa; border: 1px solid #e2e5e9; border-radius: 4px; flex:1 1 auto; }

/* Fullscreen modifier - Fix SVG visibility */
#wcm-graph-view.wcm-fullscreen { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important; 
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important; 
    margin: 0 !important; 
    padding: 0 !important;
    border-radius: 0 !important; 
    border: none !important;
    background: #fff !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: none !important;
    max-width: none !important;
    max-height: none !important;
}

#wcm-graph-view.wcm-fullscreen #wcm-graph-svg { 
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    border-radius: 0 !important; 
    border: none !important;
    background: #fafafa !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#wcm-graph-view.wcm-fullscreen .wcm-graph-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 60px !important;
    z-index: 1000000 !important;
    background: #fff !important;
    border-bottom: 2px solid #ddd !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: none !important;
}

#wcm-graph-view.wcm-fullscreen .wcm-graph-container {
    position: absolute !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #fff !important;
}

.wcm-graph-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.wcm-graph-toolbar .hint { color:#666; }
.wcm-graph-toolbar .right .button { margin-left:6px; }

.wcm-node text { font-size: 12px; fill: #2c3e50; pointer-events: none; }
.wcm-node circle { stroke: #2c3e50; stroke-width: 2px; transition: transform .12s ease, fill .12s ease, stroke .12s ease; }
.wcm-node.dragging circle { fill: #ffe082; }
.wcm-node.target circle { stroke: #2e7d32; stroke-width: 3px; }
.wcm-node.droppable circle { stroke: #2e7d32; }
.wcm-node.nodrop circle { stroke: #c62828; fill: #ffeaea; }
.wcm-node.selected circle { stroke: #1565c0; stroke-width: 3px; }
.wcm-node:hover circle { transform: scale(1.04); }
.wcm-node .wcm-badge { fill:#fff; stroke:#2c3e50; stroke-width:1.5px; }
.wcm-node .wcm-badge-text { font-size:10px; fill:#2c3e50; font-weight:600; }

.wcm-link { stroke: #9bb3c7; stroke-width: 2px; fill: none; }
.wcm-link.target { stroke: #2e7d32; }
.wcm-ghost-link { stroke: #546e7a; stroke-dasharray: 5 4; stroke-width: 2px; fill: none; opacity: .8; }

.wcm-depth { stroke: #eef2f6; stroke-width: 1px; }

.wcm-graph-container .wcm-hint { margin: 8px 0; color: #666; }

.wcm-graph-hint { position: absolute; z-index: 2; background: rgba(0,0,0,.75); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; }
.wcm-graph-hint.visible { opacity: 1; transform: translateY(0); }

/* Pulse animations for drop targets */
@keyframes wcm-pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(46,125,50,.0)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(46,125,50,.35)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(46,125,50,.0)); }
}
@keyframes wcm-pulse-red {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(198,40,40,.0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(198,40,40,.35)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(198,40,40,.0)); }
}
.wcm-node.target.droppable circle { animation: wcm-pulse .9s ease-in-out infinite; }
.wcm-node.target.nodrop circle { animation: wcm-pulse-red .9s ease-in-out infinite; }

/* Prevent body scroll when fullscreen */
body.wcm-fullscreen-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Hide WordPress admin elements */
body.wcm-fullscreen-active #wpadminbar,
body.wcm-fullscreen-active #adminmenumain,
body.wcm-fullscreen-active #adminmenuback,
body.wcm-fullscreen-active #wpfooter,
body.wcm-fullscreen-active .wcm-view-toggle,
body.wcm-fullscreen-active #wcm-list-view {
    display: none !important;
}

body.wcm-fullscreen-active #wpcontent,
body.wcm-fullscreen-active #wpbody {
    overflow: hidden !important;
}

body.wcm-fullscreen-active .wrap.wcm-admin-page {
    display: block !important;
}

/* Force fullscreen container to break out */
body.wcm-fullscreen-active #wcm-graph-view.wcm-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #fff !important;
    overflow: hidden !important;
    transform: none !important;
    box-shadow: none !important;
    max-width: none !important;
    max-height: none !important;
}

/* Ensure SVG content is visible */
#wcm-graph-view.wcm-fullscreen .wcm-graph-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#wcm-graph-view.wcm-fullscreen .wcm-node {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#wcm-graph-view.wcm-fullscreen .wcm-node circle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#wcm-graph-view.wcm-fullscreen .wcm-node text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}