/* Container Styles */
.diagram-container {
    /* Core colors */
    --color-primary: #d72344;
    --color-primary-dark: #b51d36;
    --color-primary-light: #f04b66;
    --color-text: rgb(29, 31, 72);
    --color-background: #ffffff;
    --color-border: #1d1f48;
    /* UI colors */
    --color-ui-background: #f2f2f2;
    --color-ui-border: #e0e0e0;
    --color-ui-hover: rgba(0, 0, 0, 0.05);
    --color-ui-active: rgba(0, 0, 0, 0.1);
    /* Functional colors */
    --color-info: #1976d2;
    --color-warning: #f57f17;
    --color-danger: #d32f2f;
    --color-success: #2e7d32;
    /* Diagram specific colors */
    --diagram-color-button: #337ab7;
    --diagram-color-button-hover: #23527c;
    --diagram-color-code-bg: rgb(243, 243, 243);
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    /* Typography */
    --font-family: "Infra", sans-serif;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-normal: 250ms ease-out;
    --transition-slow: 400ms ease-out;
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;


    width: 100%;
    height: 60vh;
    position: relative;
    overflow: hidden;
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, var(--color-background), var(--color-ui-background));
}

    /* Controls */
    .diagram-container .controls {
        position: relative;
        width: 140px;
        top: 20px;
        left: 20px;
        z-index: 999;
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(8px); /* Safari support */
        backdrop-filter: blur(8px);
        -webkit-border-radius: var(--radius-lg); /* Safari support */
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: 0;
        transition: var(--transition-normal);
    }

    .diagram-container .toolbar {
        display: flex;
        align-items: center;
        padding: var(--space-xs);
    }

    .diagram-container .toolbar-btn {
        width: 36px;
        height: 36px;
        border: none;
        -webkit-border-radius: var(--radius-md); /* Safari support */
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-text);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-md);
        margin: 0 2px;
        cursor: pointer;
        transition: var(--transition-fast);
    }

        .diagram-container .toolbar-btn:hover {
            background: var(--color-ui-hover);
            color: var(--color-primary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .diagram-container .toolbar-btn:active {
            transform: scale(0.95) translateY(0);
            box-shadow: var(--shadow-sm);
        }

    .diagram-container .divider {
        width: 1px;
        height: 24px;
        background: rgba(0, 0, 0, 0.1);
        margin: 0 var(--space-xs);
    }

    /* Diagram */
    .diagram-container #diagram {
        width: 100%;
        height: 100%;
        position: relative;
        top: -50px;
    }

    /* Tooltip */
    .diagram-container .tooltip {
        display: none;
        position: absolute;
        background: var(--color-background);
        border: 1px solid var(--color-border);
        -webkit-border-radius: var(--radius-md); /* Safari support */
        border-radius: var(--radius-md);
        padding: var(--space-md);
        font-size: var(--font-size-sm);
        max-width: 300px;
        z-index: 1000;
        box-shadow: var(--shadow-sm);
    }

        .diagram-container .tooltip h3 {
            margin: 0 0 var(--space-sm) 0;
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-bold);
            color: var(--color-primary);
        }

        .diagram-container .tooltip p {
            margin: 4px 0;
            line-height: 1.4;
        }

    /* Diagram Node Styles */
    .diagram-container .node {
        cursor: default;
        transition: var(--transition-normal);
        animation: show-node 0.3s ease-out;
    }

        .diagram-container .node.has-children {
            cursor: pointer;
        }

        /* Node Type Styling */
        /* Base styles for all nodes */
        .diagram-container .node rect {
            fill: var(--color-background);
            stroke: var(--color-ui-border);
            stroke-width: 1px;
            -webkit-border-radius: 6px; /* Safari support for SVG elements */
            border-radius: 6px; /* Standard property for compatibility */
            rx: 6px;
            ry: 6px;
            transition: var(--transition-normal);
            filter: drop-shadow(0px 1px 3px rgba(29, 31, 72, 0.1));
        }

        /* Common text styles */
        .diagram-container .node text {
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            fill: var(--color-text);
            dominant-baseline: middle;
            text-anchor: middle;
        }

            .diagram-container .node text.title {
                font-weight: var(--font-weight-bold);
                font-size: 1.8rem;
            }

        /* Node states (collapsed, hover) */
        .diagram-container .node rect.collapsed {
            fill: var(--diagram-color-code-bg);
        }

        .diagram-container .node.has-children rect {
            stroke: var(--diagram-color-button);
        }

        .diagram-container .node.has-children:hover rect {
            stroke: var(--diagram-color-button-hover);
            stroke-width: 2px;
            filter: drop-shadow(0px 2px 4px rgba(29, 31, 72, 0.2));
        }

        /* Node type specific styles - reused variables for consistent colors */
        /* Root node */
        .diagram-container .node[data-node-type="root"] rect {
            fill: var(--color-primary);
            stroke: var(--color-primary-dark);
        }

            .diagram-container .node[data-node-type="root"] rect.collapsed {
                fill: var(--color-primary);
            }

        .diagram-container .node[data-node-type="root"] text {
            fill: white;
        }

        /* Sana.WebApp node */
        .diagram-container .node[data-node-type="webapp"] rect {
            fill: #FFFBF2;
            stroke: #FFAB00;
        }

            .diagram-container .node[data-node-type="webapp"] rect.collapsed {
                fill: #FFFBF2;
            }

        /* Build Scripts node */
        .diagram-container .node[data-node-type="buildscripts"] rect {
            fill: #87AAC8;
            stroke: #7699B7;
        }

            .diagram-container .node[data-node-type="buildscripts"] rect.collapsed {
                fill: #87AAC8;
            }

        /* General Frontend node */
        .diagram-container .node[data-node-type="frontend"] rect {
            fill: #0B4D1C;
            stroke: #094118;
        }

            .diagram-container .node[data-node-type="frontend"] rect.collapsed {
                fill: #0B4D1C;
            }

        .diagram-container .node[data-node-type="frontend"] text {
            fill: white;
        }

        /* ADK Components node */
        .diagram-container .node[data-node-type="adk-components"] rect {
            fill: #F5F9F5;
            stroke: #0B4D1C;
        }

            .diagram-container .node[data-node-type="adk-components"] rect.collapsed {
                fill: #F5F9F5;
            }

        /* ADK Solution node */
        .diagram-container .node[data-node-type="adk-solution"] rect {
            fill: rgb(255, 218, 0);
            stroke: rgb(204, 174, 0);
        }

            .diagram-container .node[data-node-type="adk-solution"] rect.collapsed {
                fill: rgb(255, 218, 0);
            }

        /* React Hooks node */
        .diagram-container .node[data-node-type="react-hooks"] rect {
            fill: #B0F2FF;
            stroke: #222222;
        }

            .diagram-container .node[data-node-type="react-hooks"] rect.collapsed {
                fill: #B0F2FF;
            }

        /* Nuget Packages node */
        .diagram-container .node[data-node-type="nuget-packages"] rect {
            fill: #F2F2F5;
            stroke: #A4A4A9;
        }

            .diagram-container .node[data-node-type="nuget-packages"] rect.collapsed {
                fill: #F2F2F5;
            }

        /* GraphQL Endpoints node */
        .diagram-container .node[data-node-type="graphql"] rect {
            fill: #FBDCF0;
            stroke: #C42892;
        }

            .diagram-container .node[data-node-type="graphql"] rect.collapsed {
                fill: #FBDCF0;
            }

        /* GraphQL Stable node */
        .diagram-container .node[data-node-type="graphql-stable"] rect {
            fill: #2DAE58;
            stroke: #25964B;
        }

            .diagram-container .node[data-node-type="graphql-stable"] rect.collapsed {
                fill: #2DAE58;
            }

        .diagram-container .node[data-node-type="graphql-stable"] text {
            fill: white;
        }

        /* GraphQL Unstable node */
        .diagram-container .node[data-node-type="graphql-unstable"] rect {
            fill: #E53935;
            stroke: #C62828;
        }

            .diagram-container .node[data-node-type="graphql-unstable"] rect.collapsed {
                fill: #E53935;
            }

        .diagram-container .node[data-node-type="graphql-unstable"] text {
            fill: white;
        }

        /* Sana.Extensions level 1 */
        .diagram-container .node[data-node-type="extensions-l1"] rect {
            fill: #1C5D96;
            stroke: #164B7A;
        }

            .diagram-container .node[data-node-type="extensions-l1"] rect.collapsed {
                fill: #1C5D96;
            }

        .diagram-container .node[data-node-type="extensions-l1"] text {
            fill: white;
        }

        /* Sana.Extensions level 2 */
        .diagram-container .node[data-node-type="extensions-l2"] rect {
            fill: #E3EAF2;
            stroke: #C4D1E0;
            width: 350px;
        }

            .diagram-container .node[data-node-type="extensions-l2"] rect.collapsed {
                fill: #E3EAF2;
            }

    /* Link Styles */
    .diagram-container .link {
        fill: none;
        stroke: #000000;
        stroke-width: 1px;
        stroke-opacity: 0.6;
        transition: var(--transition-normal);
    }

        .diagram-container .link:hover {
            stroke-opacity: 0.8;
        }

    /* Reference Link Styles */
    .diagram-container .reference-link {
        fill: none;
        stroke: #666;
        stroke-width: 1.5px;
        stroke-dasharray: 5,5;
        stroke-opacity: 0.7;
        transition: var(--transition-normal);
        pointer-events: none;
    }

        .diagram-container .reference-link:hover {
            stroke-opacity: 1;
        }

    /* Icon Styles */
    .diagram-container .icon-group {
        pointer-events: none;
    }

        .diagram-container .icon-group i {
            font-size: var(--font-size-sm);
            color: var(--color-text);
        }

    /* Layout controls */
    .diagram-container .layout-controls {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        display: flex;
        gap: 15px;
    }

    .diagram-container .layout-btn {
        padding: 10px 15px;
        border: 1px solid var(--color-border);
        border-radius: 25px;
        background: var(--color-background);
        color: var(--diagram-color-button);
        cursor: pointer;
        font-family: var(--font-family);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-normal);
        transition: var(--transition-normal);
        box-shadow: var(--shadow-sm);
    }

        .diagram-container .layout-btn:hover {
            background: var(--diagram-color-button);
            color: var(--color-background);
            border-color: var(--diagram-color-button);
        }

        .diagram-container .layout-btn.active {
            background: var(--diagram-color-button-hover);
            color: var(--color-background);
            border-color: var(--diagram-color-button-hover);
        }

    /* Fullscreen mode adjustments */
    .diagram-container:-webkit-full-screen {
        width: 100%;
        height: 100%;
    }

    .diagram-container:-moz-full-screen {
        width: 100%;
        height: 100%;
    }

    .diagram-container:-ms-fullscreen {
        width: 100%;
        height: 100%;
    }

    .diagram-container:fullscreen {
        width: 100%;
        height: 100%;
    }

        .diagram-container:fullscreen .controls {
            position: absolute;
            top: var(--space-lg);
            left: var(--space-lg);
        }

        .diagram-container:fullscreen #diagram {
            top: 0;
        }

    /* Custom scrollbar for diagram container */
    .diagram-container::-webkit-scrollbar {
        width: 5px;
    }

    .diagram-container::-webkit-scrollbar-track {
        border-radius: 5px;
        background-color: rgb(243, 243, 243);
    }

    .diagram-container::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: var(--diagram-color-button);
    }

    /* Tooltip styles */
    .diagram-container .tooltip a {
        color: var(--color-primary);
        text-decoration: none;
    }

        .diagram-container .tooltip a:hover {
            text-decoration: underline;
        }

    /* Alert styles in diagram */
    .diagram-container .node.alert-info rect {
        stroke: var(--color-info);
    }

    .diagram-container .node.alert-warning rect {
        stroke: var(--color-warning);
    }

    .diagram-container .node.alert-danger rect {
        stroke: var(--color-danger);
    }

    /* Node control circle */
    .diagram-container .node-control {
        fill: white;
        stroke: var(--diagram-color-button);
        opacity: 0;
    }

    /* Node control icon text */
    .diagram-container .node-control-icon {
        fill: var(--diagram-color-button);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        opacity: 0;
    }

    /* Control group styles - hides the expand/collapse controls */
    .diagram-container .control-group {
        opacity: 0; /* Hide the control group completely */
        visibility: hidden; /* Ensure it doesn't take up space */
    }

/* Mobile and Small Screen Responsiveness */
@media screen and (max-width: 768px) {
    .diagram-container {
        height: 50vh; /* Slightly shorter on mobile */
    }

        .diagram-container .controls {
            position: relative;
            width: auto;
            top: 10px;
            left: 10px;
            margin-bottom: 10px;
        }

        .diagram-container #diagram {
            top: -35px; /* Reduced offset on mobile */
        }
}

@media screen and (max-width: 480px) {
    .diagram-container {
        height: 40vh; /* Even shorter on very small screens */
    }

        .diagram-container .controls {
            width: calc(100% - 20px); /* Full width with margins */
            top: 5px;
            left: 10px;
            justify-content: center;
        }

        .diagram-container #diagram {
            top: -25px; /* Further reduced offset */
        }

        .diagram-container .toolbar-btn {
            width: 32px;
            height: 32px;
        }
}