/* --- General Layout --- */
body { 
    font-family: sans-serif; 
    display: flex; 
    margin: 0; 
    height: 100vh; 
    overflow: hidden; 
}

/* --- Control Panel --- */
#controls { 
    width: 340px; 
    padding: 20px; 
    background: #f8f9fa; 
    box-sizing: border-box; 
    border-right: 1px solid #ddd; 
    z-index: 10; 
    overflow-y: auto; 
}

.input-group { 
    margin-bottom: 20px; 
    background: #fff; 
    padding: 15px; 
    border-radius: 6px; 
    border: 1px solid #e2e2e2; 
}

label { 
    font-weight: bold; 
    font-size: 14px; 
    color: #555; 
}

input, select, button { 
    width: 100%; 
    padding: 8px; 
    margin-top: 6px; 
    box-sizing: border-box; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
}

button { 
    background: #4A90E2; 
    color: white; 
    border: none; 
    cursor: pointer; 
    font-weight: bold; 
    margin-top: 10px; 
    transition: background 0.2s; 
}

button:hover { 
    background: #357ABD; 
}

.btn-delete { background: #E74C3C; }
.btn-delete:hover { background: #C0392B; }
.button-row { display: flex; gap: 10px; }


/* --- Graph Area & Title Containers --- */
#graph { 
    flex-grow: 1; 
    background: #ffffff; 
    height: 100vh;
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    overflow: hidden; 
}

/* 2. Style the header area so it sits ABOVE the SVG */
.title-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 20px 0; /* Vertical padding */
    background: #fff;
    border-bottom: 1px solid #eee; /* Optional: adds a clean separator */
}

/* 3. Main Title: REMOVE position: absolute */
#graph-title {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
    margin: 0; /* Remove high margins that push things away */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    pointer-events: none; 
}

/* 4. Subtitle: Clean spacing */
.title-container h3 {
    margin-top: 8px; /* Small gap under title */
    margin-bottom: 0;
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #7f8c8d;
    max-width: 700px;
    text-align: center;
    line-height: 1.4;
}

/* 5. The SVG now takes up the REMAINING space */
svg { 
    width: 100%; 
    flex-grow: 1; /* Fills the rest of the screen below titles */
    display: block;
    background-color: #f9f9f9;
}


#graph-title {
    text-align: center;       /* This moves the text to the middle */
    font-family: "Helvetica Neue", Arial, sans-serif; /* Change this to your preferred font */
    font-size: 2.5rem;        /* Adjust the size (rem, px, or em) */
    font-weight: bold;        /* Can be normal, bold, or a number like 400, 600 */
    color: #2c3e50;           /* Change the hex code to your preferred color */
    margin-top: 30px;         /* Adds space above the title */
    margin-bottom: 30px;      /* Adds space below the title */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); 
    z-index: 5;
    pointer-events: none;     /* Prevents text from blocking D3 mouse events */
    position: absolute;       /* Keeps it floating over the SVG */
    top: 0;                   /* Anchors it to the top so it doesn't push the SVG down */
}


/* --- D3 Elements (Nodes, Edges, SVG) --- */
svg { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

.node circle { 
    fill: #4A90E2; 
    stroke: #fff; 
    stroke-width: 2px; 
    cursor: pointer; 
}

.node circle:hover { 
    fill: #357ABD; 
    stroke: #ffcc00; 
    stroke-width: 3px; 
}

.node text { 
    font-size: 13px; 
    font-weight: bold; 
    pointer-events: none; 
    fill: #333; 
    text-shadow: 1px 1px 2px white; 
}

.link { 
    fill: none; 
    stroke: #aaa; 
    stroke-width: 2.5px; 
}


/* --- Custom D3 Tooltip --- */
.tooltip { 
    position: absolute; 
    background: rgba(30, 30, 30, 0.9); 
    color: #fff; 
    padding: 10px; 
    border-radius: 6px; 
    font-size: 13px; 
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.2s; 
    box-shadow: 0px 4px 6px rgba(0,0,0,0.2); 
    z-index: 100; 
}

.tooltip strong { 
    color: #4A90E2; 
    font-size: 15px; 
    display: block; 
    margin-bottom: 4px; 
}

#jsonModal {
    display: none; /* Controlled by JS */
}

#jsonContent {
    max-height: 400px;
    overflow: auto;
    border: 1px solid #ddd;
    font-family: 'Courier New', Courier, monospace;
}