/* ── override container padding so the tree fills available height ── */
 #pageContent {
     padding: 0 !important;
     height: calc(100vh - 70px);
     display: flex;
     flex-direction: column;
 }

 /* ── toolbar ── */
 #tree-toolbar {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 16px;
     background: #f8f9fa;
     border-bottom: 1px solid #dee2e6;
     flex-wrap: wrap;
 }

 #tree-toolbar .toolbar-title {
     font-weight: 700;
     font-size: 1rem;
     color: #343a40;
     margin-inline-end: auto;
 }

 /* ── content row ── */
 #content-row {
     display: flex;
     flex: 1;
     min-height: 0;
     text-align: center;
 }

 /* ── chart wrapper ── */
 #chart-container {
     flex: 1;
     overflow: auto;
     background: #fff;
     direction: ltr;
 }

 .orgchart {
     background: #fff;
     min-width: 100%;
     min-height: 100%;
 }

 /* ── node styles ── */
 .orgchart .node {
     padding: 4px 10px;
     cursor: pointer;
     transition: box-shadow .2s;
 }

 .orgchart .node.focused {
     box-shadow: 0 0 0 3px #3498db;
     border-radius: 8px;
 }

 .orgchart .node .title {
     height: 30px;
     line-height: 30px;
     font-size: 0.85rem;
 }

 .orgchart .node .avatar {
     border-radius: 50%;
     display: block;
     margin: 0 auto 4px;
     width: 48px;
     height: 48px;
     object-fit: cover;
     box-shadow: rgba(99, 99, 99, 0.5) 0 2px 6px;
 }

 .orgchart .node .node-actions {
     display: none;
     gap: 4px;
     justify-content: center;
     padding: 4px 0 2px;
 }

 .orgchart .node .content {
     font-size: 14px;
 }

 .orgchart .node:hover .node-actions,
 .orgchart .node.focused .node-actions {
     display: flex;
 }

 .orgchart .node .node-btn {
     font-size: 0.7rem;
     padding: 1px 6px;
     border-radius: 3px;
     border: 1px solid #ced4da;
     background: #fff;
     cursor: pointer;
     white-space: nowrap;
 }

 .orgchart .node .node-btn:hover {
     background: #e9ecef;
 }

 .orgchart .node .node-btn.btn-edit {
     border-color: #0d6efd;
     color: #0d6efd;
 }

 .orgchart .node .node-btn.btn-add {
     border-color: #198754;
     color: #198754;
 }

 .orgchart .node .node-btn.btn-del {
     border-color: #dc3545;
     color: #dc3545;
 }

 /* ── side panel ── */
 #person-panel {
     width: 0;
     overflow: hidden;
     transition: width .3s ease;
     border-inline-start: 0 solid #dee2e6;
     background: #fafafa;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
 }

 #person-panel.open {
     width: 300px;
     border-inline-start-width: 1px;
     padding: 20px 16px;
 }

 #person-panel h5 {
     margin-bottom: 14px;
     color: #343a40;
     font-weight: 700;
 }

 .person-avatar-lg {
     display: block;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     object-fit: cover;
     margin: 0 auto 16px;
     box-shadow: rgba(99, 99, 99, 0.5) 0 2px 8px;
 }

 .person-avatar-placeholder {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: #dee2e6;
     margin: 0 auto 16px;
     font-size: 2rem;
     color: #6c757d;
 }

 .person-field-label {
     font-size: 0.75rem;
     font-weight: 700;
     color: #6c757d;
     text-transform: uppercase;
     margin-bottom: 2px;
 }

 .person-field-value {
     font-size: 0.9rem;
     color: #343a40;
     margin-bottom: 12px;
     word-break: break-word;
 }

 .person-bio {
     font-size: 0.85rem;
     color: #495057;
     line-height: 1.6;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 #panel-close {
     position: absolute;
     top: 8px;
     inset-inline-end: 10px;
     background: none;
     border: none;
     font-size: 1rem;
     cursor: pointer;
     color: #6c757d;
     line-height: 1;
 }

 #panel-close:hover {
     color: #343a40;
 }

 #person-panel-inner {
     position: relative;
     flex: 1;
     overflow-y: auto;
 }

 /* ── image preview in modal ── */
 #img-preview-wrap {
     display: none;
     margin-top: 8px;
 }

 #img-preview-wrap img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 50%;
     border: 1px solid #dee2e6;
 }

 /* ── empty chart message ── */
 #chart-empty {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     color: #6c757d;
     font-size: 1.1rem;
     flex-direction: column;
     gap: 12px;
 }

 .orgchart .content {
     margin-top: 0 !important;
 }
 ul.nodes{
    padding-right: 0 !important;
 }

 .orgchart .node .title{
    width: auto;
    padding: 0 5px;
 }
.orgchart .node .content{
    width: auto;
    min-width: 130px;
}