/* CSS for Visual Org Chart plugin - Frontend */

#voc-chart-container {
    width: 100%;
    height: auto;
    overflow-x: auto; /* Handle wide charts on mobile */
    background-color: #2b3149; /* Dark background from image */
    padding: 20px;
    box-sizing: border-box;
}

#voc-org-chart {
    display: block;
    margin: 0 auto;
}

/* Connector Lines */
#voc-org-chart .link {
    fill: none;
    stroke: #ffffff; /* White lines from image */
    stroke-width: 1.5px;
}

/* Node/Card elements */
#voc-org-chart .node .card-bg {
    filter: drop-shadow( 0px 4px 8px rgba(0,0,0,0.3) ); /* Soft shadow for boxes */
}

#voc-org-chart .node .avatar-cap {
    fill: #ffffff;
}

/* Typography matching the image */
#voc-org-chart .node text {
    text-anchor: middle;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: -0.5px;
}

#voc-org-chart .node .field-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    fill: #ffffff;
    opacity: 0.8;
}

#voc-org-chart .node .field-value {
    font-size: 14px;
    font-weight: 800;
    fill: #ffffff;
}

#voc-org-chart .node .field-description {
    font-size: 8px;
    font-weight: 300;
    fill: #ffffff;
    opacity: 0.7;
    /* Basic text flow adjustment; full multi-line handling requires JS measurement */
}

#voc-org-chart .node .field-contact {
    font-size: 7px;
    fill: #ffffff;
    opacity: 0.5;
}