/* interactive-graph.css - Graph-specific styles */

/* === GRAPH CONTAINER === */
#graph-container {
    width: 100%;
    height: 100%;
    min-height: var(--graph-container-min-height);
    position: relative;
    cursor: crosshair;
    border-radius: var(--radius-medium);
    overflow: hidden;

    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#graph-container.dragging {
    cursor: grabbing !important;
}

.graph-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.graph-description {
    color: var(--graph-text-secondary);
    font-size: var(--font-size-body);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-base);
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* === GRAPH GROUPS === */
.graph-group {
    transition: transform var(--animation-duration-float) var(--animation-easing);
}

.graph-main-group {
    transform-origin: center center;
}

/* === GRAPH TITLES === */
.graph-title {
    fill: var(--graph-text-color);
    font-size: var(--graph-title-size);
    font-weight: bold;
    text-anchor: middle;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: var(--opacity-nontransparent);
    font-family: var(--font-family-main);
}

.graph-title.primary {
    fill: var(--opacity-nontransparent);
}

.graph-title.secondary {
    fill: var(--opacity-nontransparent);
}

/* === GRAPH LINKS === */
.graph-link {
    stroke: var(--graph-link-color);
    stroke-width: var(--graph-link-width);
    stroke-opacity: var(--graph-link-opacity);
    filter: drop-shadow(var(--shadow-graph-link));
    stroke-linecap: round;
    transition: all var(--transition-normal) var(--transition-ease);
}

.graph-link:hover {
    stroke-opacity: 1;
    stroke-width: calc(var(--graph-link-width) * 1.5);
}

.graph-link.chain {
    stroke-dasharray: 5, 5;
    animation: dash-flow 2s linear infinite;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -10;
    }
}

/* === GRAPH NODES === */
.graph-node {
    cursor: pointer;
    transition: all var(--transition-normal) var(--transition-ease);
    transform-origin: center center;
}

.graph-node:hover {
    filter: brightness(var(--hover-brightness));
}

.graph-node:active {
    transform: scale(0.95);
}

.graph-node.dragging {
    cursor: grabbing;
}

/* === NODE IMAGES === */
.node-image {
    stroke: var(--graph-node-stroke);
    stroke-width: var(--graph-node-stroke-width);
    filter: drop-shadow(var(--shadow-graph-node));
    transition: all var(--transition-normal) var(--transition-ease);
    fill-opacity: var(--opacity-nontransparent);
}

.node-image.center {
    stroke-width: calc(var(--graph-node-stroke-width) * 1.5);
}

.node-image.branch {
    stroke-width: var(--graph-node-stroke-width);
}

.graph-node:hover .node-image {
    stroke-width: var(--graph-node-stroke-width-hover);
    fill-opacity: 1;
    transform: scale(var(--hover-scale));
}

.graph-node:hover .node-image.glow {
    filter: drop-shadow(var(--shadow-graph-node)) 
            drop-shadow(0 0 10px currentColor);
}

/* === NODE TEXT === */
.node-text {
    fill: var(--graph-text-color);
    font-size: var(--graph-text-size);
    font-weight: bold;
    text-anchor: middle;
    pointer-events: none;
    font-family: var(--font-family-main);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: var(--opacity-nontransparent);
    transition: all var(--transition-normal) var(--transition-ease);
}

.node-text.center {
    font-size: calc(var(--graph-text-size) * 1.1);
    font-weight: 900;
}

.node-text.branch {
    font-size: var(--graph-text-size);
    font-weight: 600;
}

.graph-node:hover .node-text {
    opacity: 1;
    transform: translateY(-2px);
}

/* === NODE ICONS === */
.node-icon {
    fill: var(--graph-text-color);
    font-size: var(--graph-icon-size);
    text-anchor: middle;
    pointer-events: none;
    transition: all var(--transition-normal) var(--transition-ease);
    opacity: var(--opacity-nontransparent);
}

.node-icon.center {
    font-size: calc(var(--graph-icon-size) * 1.2);
}

.node-icon.branch {
    font-size: var(--graph-icon-size);
}

.graph-node:hover .node-icon {
    opacity: 1;
    transform: scale(1.1) rotate(5deg);
}

/* === NODE ANIMATIONS === */
.node-pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: var(--opacity-nontransparent);
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.node-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* === INTERACTIVE STATES === */
.graph-node.selected .node-image {
    stroke: var(--graph-color-primary);
    stroke-width: calc(var(--graph-node-stroke-width-hover) * 1.5);
    fill-opacity: 1;
}

.graph-node.highlighted .node-image {
    filter: drop-shadow(var(--shadow-graph-node)) 
            drop-shadow(0 0 15px var(--graph-color-primary));
}

.graph-node.disabled {
    opacity: var(--opacity-transparent);
    cursor: not-allowed;
}

.graph-node.disabled:hover {
    filter: none;
    transform: none;
}

/* === LOADING STATES === */
.graph-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--graph-text-secondary);
    font-size: var(--font-size-large);
}

.graph-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--graph-text-secondary);
    border-top: 2px solid var(--graph-color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: var(--spacing-sm);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    #graph-container {
        min-height: var(--graph-container-min-height-mobile);
        cursor: default;
    }

    .graph-description {
        font-size: var(--font-size-small);
        margin-bottom: var(--spacing-sm);
    }

    .node-image {
        stroke-width: var(--graph-node-stroke-width-mobile);
    }

    .node-text {
        font-size: var(--graph-text-size-mobile);
    }

    .node-icon {
        font-size: var(--graph-icon-size-mobile);
    }

    .graph-title {
        font-size: calc(var(--graph-title-size) * 0.9);
    }

    .graph-link {
        stroke-width: calc(var(--graph-link-width) * 0.8);
    }

    .graph-node:hover .node-image {
        transform: scale(1.02);
    }

    .graph-node:hover .node-icon {
        transform: scale(1.05);
    }
}

/* === ACCESSIBILITY === */
.graph-node:focus {
    outline: 2px solid var(--graph-color-primary);
    outline-offset: 2px;
}

.graph-node:focus .node-image {
    stroke: var(--graph-color-primary);
    stroke-width: var(--graph-node-stroke-width-hover);
}

/* === THEME VARIATIONS === */
[data-theme="dark"] .graph-link {
    stroke-opacity: 0.8;
}

[data-theme="dark"] .node-image {
    stroke-opacity: 0.9;
}

[data-theme="light"] .graph-description {
    color: rgba(255, 255, 255, 0.7);
}

/* === PRINT STYLES === */
@media print {
    #graph-container {
        min-height: 400px;
    }
    
    .graph-node {
        cursor: default;
    }
    
    .node-image {
        filter: none;
    }
    
    .graph-link {
        filter: none;
    }
    
    .graph-description {
        color: #666;
    }
}