/* Container set up as a 3x3 Grid */
.diagram-container {
    position: relative;
    width: 600px;
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 20px;
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

/* Base style for all 5 div nodes */
.node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 60px;
    background-color: #ffffff;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-family: sans-serif;
    font-weight: bold;
    color: #1e293b;
    justify-self: center; /* Centers horizontally in its grid cell */
    align-self: center; /* Centers vertically in its grid cell */
}

    /* ----------------------------------------------------
   Grid Positions for Each Specific Div
   ---------------------------------------------------- */

    /* Top Div: Row 1, Column 2 */
    .node.top {
        grid-row: 1;
        grid-column: 2;
    }

    /* Left Div: Row 2, Column 1 */
    .node.left {
        grid-row: 2;
        grid-column: 1;
    }

    /* Center Div: Row 2, Column 2 */
    .node.center {
        grid-row: 2;
        grid-column: 2;
        border-color: #10b981; /* Optional highlight for center node */
        background-color: #ecfdf5;
    }

    /* Right Div: Row 2, Column 3 */
    .node.right {
        grid-row: 2;
        grid-column: 3;
    }

    /* Bottom Div: Row 3, Column 2 */
    .node.bottom {
        grid-row: 3;
        grid-column: 2;
    }