/* Graph and Canvas Styles - BIOS Aesthetic */

/* ===== SIMPLE GRAPH SPACING CONTROLS ===== */
:root {
    /* Simple ratio controls - default to compact spacing for better node visibility */
    --graph-x-ratio: 0.2;  /* Horizontal spacing multiplier (0.3 = very tight, 1.0 = normal, 2.0 = very wide) */
    --graph-y-ratio: 0.2;  /* Vertical spacing multiplier (0.3 = very tight, 1.0 = normal, 2.0 = very tall) */
    
    /* Component Set Box Styling */
    --component-set-box-padding: 16px;  /* Padding from all directions around the content */
    --component-set-content-gap: 16px;  /* Gap between content items inside the box */
    --component-set-label-offset-x: 6px;  /* Horizontal offset of label from box edge */
    --component-set-label-offset-y: -12px;  /* Vertical offset of label from box edge (creates 16px gap to content) */
}

/* Quick preset classes for common layouts */
.graph-tight {
    --graph-x-ratio: 0.2;
    --graph-y-ratio: 0.2;
}

.graph-compact {
    --graph-x-ratio: 0.4;
    --graph-y-ratio: 0.4;
}

.graph-normal {
    --graph-x-ratio: 0.6;
    --graph-y-ratio: 0.6;
}

.graph-spacious {
    --graph-x-ratio: 1.0;
    --graph-y-ratio: 1.0;
}

/* ===== END SPACING CONTROLS ===== */

/* Canvas Area */
.canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-canvas);
    height: 100%;
}

/* Empty State Styling - BIOS Style */
.empty-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-canvas);
    z-index: 10;
    pointer-events: none;
}

.empty-state-content {
    text-align: center;
    color: var(--text-secondary);
    max-width: 400px;
    padding: var(--space-xl);
    font-family: var(--font-bios);
}

.empty-state-icon {
    font-size: var(--font-size-xxl);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.empty-state p {
    font-size: var(--font-size-base);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

.empty-state-hint {
    padding: 0.75rem 1rem;
    background: var(--bg-interactive);
    border: var(--border-width) solid var(--border-primary);
    border-radius: 0px;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.empty-state-hint span {
    display: inline-block;
}

#graph {
    width: 100%;
    height: 100%;
    background: var(--bg-canvas);
    background-size: 15px 15px;
    display: block;
}

/* Navigation Controls - BIOS Style */
.canvas-controls {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 50;
}

.canvas-btn {
    font-size: var(--font-size-xl);
    width: 48px;
    height: 48px;
    background: var(--bg-interactive);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-primary);
    cursor: pointer;
    transition: all var(--transition-speed);
    box-shadow: var(--shadow-offset-small) var(--shadow-offset-small) 0 var(--shadow-primary);
    font-family: var(--font-bios);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-btn:hover {
    background: var(--cta-primary);
    border-color: var(--cta-primary);
    color: var(--text-on-white);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-primary);
}

.canvas-btn:active {
    transform: translate(0, 0);
    box-shadow: 0 0 0 var(--shadow-primary);
}

/* Enhanced Graph Styles */
.link {
    stroke-opacity: 0.8;
    stroke-width: 1.5px;
    transition: all 0.3s;
    stroke-dasharray: 8, 4;
    animation: dash-flow 1.5s linear infinite;
}

/* Animated flowing dashes */
@keyframes dash-flow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 12;
    }
}

.link.aliases {
    stroke: var(--text-primary);
    stroke-width: 1.5px;
    stroke-dasharray: 5,5;
}

.node-group {
    cursor: pointer;
}

.node-group:hover {
    opacity: 0.9;
}

/* Link and Marker Styling */
.link.alias-link {
    fill: none;
}

/* Ensure markers are visible if they overflow their container */
marker {
    overflow: visible;
}

/* Gradient Stop Styles for Links */
.link-gradient-start {
    stop-color: var(--text-primary) !important;
    stop-opacity: 1.0 !important;
}

.link-gradient-end {
    stop-color: var(--text-primary) !important;
    stop-opacity: 1.0 !important;
}

/* Node Rectangle Styles */
.node-rect {
    fill: #F5F5F5;
    /* stroke color is set via JavaScript based on connection type */
    stroke-width: 2px;
    rx: 0px;
    ry: 0px;
    cursor: pointer;
}

/* Node highlight effect - flat design */
.node-rect.highlighted,
.style-rect.highlighted {
    stroke: var(--cta-primary) !important;
    stroke-width: 4px !important;
}

/* No animations in flat BIOS design */

/* Sidebar open indicator - invert fill color but keep stroke color for connection type */
.node.sidebar-open .node-rect,
.node.sidebar-open .style-rect {
    fill: var(--cta-primary) !important;
    /* stroke color is NOT overridden - it keeps the connection type color from JavaScript */
    stroke-width: 3px !important; /* Increased width to show selection */
}

/* Invert text color when sidebar is open - white text on black background */
.node.sidebar-open .node-label {
    fill: #FFFFFF !important;
}

/* Ensure sidebar-open indicator works for collapsed component sets too */
.node.sidebar-open .collapsed-component-set {
    fill: var(--cta-primary) !important;
    /* stroke keeps its purple color for component sets */
    stroke-width: 3px !important;
}

/* White text on collapsed sets when selected */
.node.sidebar-open .collapsed-set-label {
    fill: #FFFFFF !important;
}

/* Node label styling */
.node-label {
    font-size: 12px;
    font-weight: 700;
    fill: var(--text-primary);
    pointer-events: none;
    user-select: none;
    text-anchor: middle;
    dominant-baseline: central;
    alignment-baseline: central;
}

/* Ensure node labels are visible on white canvas */
.node-label {
    fill: #000000 !important;
}

/* Node gradient indicators */
.radial-gradient-node {
    /* Add a subtle visual indicator for radial gradients */
    stroke-width: 2px !important;
    /* Flat design - no rounded corners */
    rx: 0px !important;
    ry: 0px !important;
}

.angular-gradient-node {
    /* Add a dotted border for angular gradients */
    stroke-dasharray: 2, 2 !important;
    stroke-width: 2px !important;
}

.linear-gradient-node {
    /* Keep solid border for linear gradients but make it slightly thicker */
    stroke-width: 2px !important;
}

/* Additional styling for radial gradient tooltips */
.tooltip .gradient-stop {
    position: relative;
}

.tooltip .gradient-stop:before {
    content: "●";
    margin-right: 4px;
    color: var(--text-muted);
}

/* Responsive adjustments for canvas controls */
@media (max-width: 768px) {
    .canvas-controls {
        bottom: 16px;
        right: 16px;
        flex-direction: row;
        gap: 4px;
    }
    
    .canvas-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .canvas-controls {
        bottom: 8px;
        right: 8px;
    }
}

/* ===== COMPONENT NESTING VISUALIZATION ===== */

/* Nesting relationship edges - make them visually distinct */
.nesting-link {
    stroke-dasharray: 10 6 !important; /* Distinct dashed pattern for nesting */
    animation: dash-flow-slow 2s linear infinite !important;
}

/* Slower animation for nesting links */
@keyframes dash-flow-slow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 16;
    }
}

/* Nesting badges on nodes */
.nesting-badge {
    cursor: help;
}

/* Badge positioning and styling */
.uses-badge circle {
    /* Top-right badge - component uses other components */
    fill: var(--color-green-component); /* Emerald green */
}

.used-in-badge circle {
    /* Bottom-right badge - component is used in other components */
    fill: var(--color-blue-component); /* Blue */
}

/* Highlight nesting relationships on hover */
.node-group:hover ~ .nesting-link,
.nesting-link:hover {
    
    stroke-width: 3 !important;
}

/* Style for gradient stops in nesting links */
.nesting-link + linearGradient .link-gradient-start {
    stop-color: var(--color-green-component); /* Emerald for source */
}

.nesting-link + linearGradient .link-gradient-end {
    stop-color: var(--color-blue-component); /* Blue for target */
}

/* Component node enhancements when part of nesting */
.node-group[data-has-nesting="true"] rect {
    stroke: var(--color-green-component); /* GREEN - consumer (uses others) */
    stroke-width: 2px;
}

.node-group[data-is-nested="true"] rect {
    stroke: var(--color-orange-component); /* ORANGE - provider (used by others) */
    stroke-width: 2px;
}

/* Node coloring based on nesting relationships (matches legend) */
/* DEPRECATED: Colors are now set programmatically based on permanent connection type
 * These CSS color overrides have been disabled to allow the permanent connection type system
 * to correctly display node colors based on full graph analysis, not just visible nesting
 * 
 * Previous CSS rules that were overriding programmatic colors:
 * .parent-component rect { fill: #10b981 !important; } - Was forcing green for consumers
 * .child-component rect { fill: #ff9500; } - Was forcing orange for providers  
 * .parent-and-child-component rect { fill: #3b82f6; } - Was forcing blue for both
 * .standalone-component rect { fill: #6b7280; } - Was forcing gray for standalone
 * 
 * These are no longer needed as getNodeColor() handles all coloring based on permanent
 * connection types calculated from the full graph at load time.
 */

/* ===== END COMPONENT NESTING VISUALIZATION ===== */

/* ===== VARIANT HIERARCHY VISUALIZATION ===== */
/* Make variants visually subordinate to their parent component sets */

/* Variant nodes have a subtle visual treatment */
/* REMOVED: This was overriding connection-type colors for variants
.variant-node {
    stroke: var(--accent-white-20) !important;
    stroke-width: 1px !important;
}

.variant-node:hover {
    stroke: var(--accent-white-40) !important;
    stroke-width: 2px !important;
}
*/

/* Variant labels are slightly muted */
.variant-label {
    font-weight: 400;
    opacity: 0.95;
}

/* Component set nodes (parents) are more prominent */
.node-group[data-node-type="component-set"] rect {
    stroke: var(--color-purple-component-60);
    stroke-width: 2.5px;
}

.node-group[data-node-type="component-set"]:hover rect {
    stroke: var(--color-purple-component-90);
    stroke-width: 3px;
}

/* Add a subtle connection indicator for variants to their parent set */
.node-group[data-node-type="component"] .variant-node::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--color-purple-component-30);
}

/* ===== END VARIANT HIERARCHY ===== */

/* ===== EDGE TYPE DIFFERENTIATION ===== */
/* Different line styles for different relationship types */

/* Variant-to-variant edges are more subtle */
.variant-to-variant-link {
    stroke-opacity: 0.8 !important;
    stroke-width: 2px !important;
    stroke-dasharray: 4,3 !important;
    animation: dash-flow-variant 1.8s linear infinite !important;
}

.variant-to-variant-link:hover {
    stroke-opacity: 0.8 !important;
    stroke-width: 2px !important;
}

/* Edges involving variants but not both */
.variant-link {
    stroke-opacity: 0.8 !important;
    stroke-width: 2px !important;
    animation: dash-flow 1.5s linear infinite !important;
}

.variant-link:hover {
    stroke-opacity: 0.8 !important;
    stroke-width: 2px !important;
}

/* Set-to-set edges are prominent */
.set-link {
    stroke-opacity: 0.8 !important;
    stroke-width: 2px !important;
    animation: dash-flow 1.5s linear infinite !important;
}

.set-link:hover {
    stroke-opacity: 0.8 !important;
    stroke-width: 2px !important;
}

/* Animation for variant-to-variant links (adjusted for smaller dash pattern) */
@keyframes dash-flow-variant {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 7; /* 4+3 = 7 */
    }
}

/* Grouping boxes for component sets */
.component-set-group-box:hover {
    stroke: var(--color-purple-component-60) !important;
    stroke-width: 3 !important;
}

.component-set-group-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Clickable label group for component sets */
.component-set-label-group {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.component-set-label-group:hover .component-set-label-bg {
    fill: var(--color-purple-component) !important;
    stroke: var(--color-purple-component) !important;
    stroke-width: 2 !important;
}

.component-set-label-group:hover text {
    fill: var(--bg-canvas) !important;
}

.component-set-label-group:active {
    opacity: 0.7;
}

/* Toggle button for collapsing/expanding component sets */
.component-set-toggle {
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.component-set-toggle:hover circle {
    fill: var(--color-purple-component) !important;
    stroke: var(--color-purple-component) !important;
    stroke-width: 2 !important;
}

.component-set-toggle:active {
    transform: scale(0.95);
}

/* Collapsed component set nodes */
.collapsed-component-set {
    cursor: pointer;
    transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
    fill: var(--color-purple-component) !important;
    stroke: var(--color-purple-component) !important;
    stroke-width: 2.5 !important;
}

.collapsed-component-set:hover {
    fill: var(--color-purple-component-light) !important;
    stroke: var(--color-purple-component-light) !important;
    stroke-width: 3 !important;
}

/* Text color for collapsed sets - white on purple background */
.collapsed-set-label {
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: fill 0.2s ease;
    fill: #FFFFFF !important;
}

/* Keep text white on hover */
.node-group:hover .collapsed-set-label {
    fill: #FFFFFF !important;
}

.collapsed-set-expand-icon {
    cursor: pointer;
}

.collapsed-set-expand-icon:hover circle {
    fill: var(--accent-white-40) !important;
    stroke-width: 2 !important;
}

.collapsed-set-expand-icon:hover text {
    font-size: 16px !important;
}

/* ===== END EDGE TYPE DIFFERENTIATION ===== */

/* ===== AUTOMATIC PATH HIGHLIGHTING ===== */
/* Highlight paths when hovering over nodes to show relationships */

/* Dimmed state for non-connected edges */
.link.dimmed {
    opacity: 0.15 !important;
    transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

/* Highlighted path state - flat design */
.link.path-highlighted {
    opacity: 1 !important;
    stroke-opacity: 1 !important;
    stroke-width: 3px !important;
}

/* Regular nesting links when path-highlighted keep their animation */
.link.nesting-link.path-highlighted {
    stroke-width: 4px !important; /* Slightly thicker when highlighted */
    stroke-dasharray: 10 6 !important; /* Keep the nesting dash pattern */
    animation: dash-flow-slow 2s linear infinite !important; /* Keep animation */
}

/* Cross-file links when path-highlighted maintain their animation */
.link.cross-file-link.path-highlighted {
    stroke-width: 6px !important; /* Thicker when highlighted */
    stroke-dasharray: 12 6 !important; /* Keep the cross-file dash pattern */
    animation: cross-file-pulse 3s ease-in-out infinite !important; /* Keep animation */
}

/* No animations in flat design */

/* Persistent highlight indicator - white border */
.node-group.persistent-highlight rect {
    stroke: var(--cta-primary) !important;
    stroke-width: 3px !important;
}

/* No animations or transitions in flat BIOS design */

/* ===== END AUTOMATIC PATH HIGHLIGHTING ===== */

/* ===== CROSS-FILE COMPONENT RELATIONSHIPS ===== */
/* Visual distinction for components and edges that span multiple files */

/* Cross-file edges use distinct colors and styling */
.cross-file-link {
    stroke-width: 2px !important;
    stroke-dasharray: 12 6 !important; /* Longer dashes for cross-file distinction */
    animation: cross-file-flow 2.5s linear infinite !important;
    opacity: 0.8 !important;
}

/* Flowing dash animation for cross-file links */
@keyframes cross-file-flow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 18; /* 12+6 = 18 */
    }
}

/* Cross-file link hover state */
.cross-file-link:hover {
    stroke-width: 2px !important;
    opacity: 0.8 !important;
}

/* Cross-file notification styling */
.cross-file-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(17, 24, 39, 0.95);
    border: 2px solid #9747FF;
    border-radius: 4px;
    padding: 12px 16px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 350px;
    box-shadow: 0 4px 12px rgba(151, 71, 255, 0.3);
    animation: slideInRight 0.3s ease-out;
}

.cross-file-notification.enhanced {
    padding: 16px 20px;
}

.cross-file-notification .notification-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cross-file-notification .notification-icon {
    font-size: 18px;
}

.cross-file-notification .notification-text {
    flex: 1;
}

.cross-file-notification .cross-file-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(151, 71, 255, 0.3);
    font-size: 11px;
    font-weight: 400;
    opacity: 0.9;
}

.cross-file-notification .file-group {
    padding: 4px 8px;
    background: rgba(151, 71, 255, 0.1);
    border-radius: 2px;
}

.cross-file-notification.fade-out {
    animation: slideOutRight 0.3s ease-in forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Tree item indicator for cross-file components in path */
.tree-node-header.cross-file-path {
    border-left: 3px solid #9747FF !important;
    padding-left: 9px !important; /* Compensate for border */
}

.tree-node-header.cross-file-path::before {
    content: "🔗";
    position: absolute;
    left: -20px;
    font-size: 12px;
}

/* ===== END CROSS-FILE COMPONENT RELATIONSHIPS ===== */