/* tree-view.css */

/* --- Container and Layout --- */
.ey-tree-container {
    width: 100%;
    overflow-x: auto; /* Allows horizontal scrolling */
    padding: 40px 0;
    background: #fdfdfd;
    display: block; /* Change to block for better scroll handling */
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

.ey-tree {
    display: inline-block; /* Essential for centering with text-align */
    min-width: max-content; /* Forces container to respect the full width of the tree */
    padding: 20px;
    vertical-align: top;
}

    .ey-tree ul {
        padding-top: 20px;
        position: relative;
        display: flex;
        justify-content: center;
        margin: 0;
        padding-left: 0;
    }

    .ey-tree li {
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 10px 0 10px;
        flex: 0 0 auto; /* CRITICAL: Prevents nodes from squashing/shrinking */
    }

        /* --- Connector Line Logic --- */
        .ey-tree li::before,
        .ey-tree li::after {
            content: '';
            position: absolute;
            top: 0;
            right: 50%;
            border-top: 2px solid #2e7d32;
            width: 50%;
            height: 20px;
        }

        .ey-tree li::after {
            right: auto;
            left: 50%;
            border-left: 2px solid #2e7d32;
        }

        .ey-tree li:only-child::after,
        .ey-tree li:only-child::before {
            display: none;
        }

        .ey-tree li:only-child {
            padding-top: 0;
        }

        .ey-tree li:first-child::before,
        .ey-tree li:last-child::after {
            border: 0 none;
        }

        .ey-tree li:last-child::before {
            border-right: 2px solid #2e7d32;
            border-radius: 0 5px 0 0;
        }

        .ey-tree li:first-child::after {
            border-radius: 5px 0 0 0;
        }

    .ey-tree ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 2px solid #2e7d32;
        width: 0;
        height: 20px;
    }

/* --- Node Box Styling --- */
.ey-node {
    border: 1px solid #2e7d32;
    display: inline-block;
    border-radius: 6px;
    width: 110px; /* Consistent width for alignment */
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    z-index: 5;
    transition: all 0.2s ease; /* Smooth transition for hover effects */
}

    .ey-node .node-id {
        display: block;
        background: #2e7d32;
        color: white;
        padding: 4px;
        font-weight: bold;
        font-size: 13px;
    }

    .ey-node .node-name {
        display: block;
        padding: 6px 4px;
        font-size: 10px;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Keeps long names from breaking the box */
    }

    /* --- Interactivity States --- */
    /* Add hover effects only to valid (non-empty) nodes */
    .ey-node:not(.node-empty) {
        cursor: pointer;
    }

        .ey-node:not(.node-empty):hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(46, 125, 50, 0.2);
            border-color: #1b5e20;
        }

        .ey-node:not(.node-empty):active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

/* --- Empty Node Styling --- */
.node-empty {
    border-color: #ccc !important;
    opacity: 0.5;
    cursor: default; /* No pointer for empty placeholders */
}

    .node-empty .node-id {
        background: #999 !important;
    }

/* --- BACK BUTTON STYLING --- */
.ey-back-btn {
    display: block;
    margin: 0 auto 25px auto;
    padding: 10px 20px;
    background-color: #2e7d32;
    color: white;
    border: none;
    border-radius: 30px; /* Rounded pill shape */
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10; /* Ensure it stays above tree connectors */
}

    .ey-back-btn:hover {
        background-color: #1b5e20;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        transform: translateY(-2px); /* Vertical nudge for better feel */
    }

    .ey-back-btn:active {
        transform: scale(0.98);
    }