/* Organization Tree CSS */
.org-tree * { margin: 0; padding: 0; box-sizing: border-box; }

.org-tree {
    white-space: nowrap;
    overflow-x: auto;
    padding: 20px;
    min-height: 600px;
    text-align: center;
}

.org-tree ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
}

.org-tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
}

/* We will use flexbox for ul, so float left is not needed for li, but let's keep it safe or use flex item properties */
.org-tree li {
    float: none;
    display: inline-block;
    vertical-align: top;
}

/* Connectors */
.org-tree li::before, .org-tree li::after {
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 2px solid #cbd5e1; /* slate-300 */
    width: 50%; height: 20px;
    z-index: -1;
}

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

/* Remove connectors from the only child */
.org-tree li:only-child::after, .org-tree li:only-child::before {
    display: none;
}

/* Remove space from the top of single children */
.org-tree li:only-child { padding-top: 0; }

/* Remove left connector from first child and right connector from last child */
.org-tree li:first-child::before, .org-tree li:last-child::after {
    border: 0 none;
}

/* Adding back the vertical connector to the last nodes */
.org-tree li:last-child::before {
    border-right: 2px solid #cbd5e1;
    border-radius: 0 5px 0 0;
}

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

/* Time to add downward connectors from parents */
.org-tree ul ul::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #cbd5e1;
    width: 0; height: 20px;
    z-index: -1;
}

/* The Box itself - Modern Green Theme */
.org-node {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 12px 16px;
    text-decoration: none;
    color: #064e3b; /* emerald-900 */
    font-family: inherit;
    font-size: 11px;
    display: inline-block;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
    min-width: 110px;
    max-width: 180px;
    white-space: normal;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    font-weight: 600;
}

.org-node:hover {
    box-shadow: 0 10px 15px -3px rgba(6, 78, 59, 0.15), 0 4px 6px -2px rgba(6, 78, 59, 0.1);
    transform: translateY(-3px) scale(1.02);
    z-index: 20;
    border-color: #10b981; /* emerald-500 */
}

/* Green Theme Levels */

/* Level 1: Primary Leadership (Rektor) - Deepest Green */
.org-node.level-1 { 
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    color: white;
    border-color: #047857;
    box-shadow: 0 10px 15px -3px rgba(6, 78, 59, 0.3);
}

/* Level 2: Secondary Leadership (Wakil Rektor) - Emerald */
.org-node.level-2 { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-color: #34d399;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
}

/* Level 3: Bureaus & Institutions (Biro/Lembaga) - Teal/Cyan */
.org-node.level-3 { 
    background: white;
    border-left: 4px solid #0d9488; /* teal-600 */
    color: #115e59;
}

/* Level 4: Faculties (Fakultas) - Light Green/Sage */
.org-node.level-4 { 
    background: #ecfdf5; /* emerald-50 */
    border: 1px solid #a7f3d0;
    color: #065f46;
}

/* Level 5: Departments/Units (Prodi) - Minimalist */
.org-node.level-5 { 
    background: white;
    border: 1px dashed #d1fae5;
    color: #64748b;
    font-size: 10px;
}

/* External Entities (Yayasan/Dikti) - Neutral Slate */
.org-node.level-external {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Connector Lines - Soft Green */
.org-tree li::before, .org-tree li::after, .org-tree ul ul::before {
    border-color: #94a3b8; /* slate-400 - keeping neutral for lines, or use #a7f3d0 for green */
}

/* Legacy Support (Mapping old classes to new theme roughly if needed, but better to replace HTML) */
.org-node.yellow { @apply level-2; } 
.org-node.green { @apply level-4; }
.org-node.blue { @apply level-3; }
.org-node.orange { @apply level-3; }

/* Custom Line Types */
.line-dotted li::before, .line-dotted li::after, .line-dotted ul::before {
    border-style: dotted;
}

/* Helper for top level absolute positioning workaround */
.top-level-connector {
    position: absolute;
    height: 40px;
    width: 2px;
    background: #cbd5e1;
    left: 50%;
    bottom: -40px;
}

/* Hide connectors for specific logic if needed */
.no-line::before, .no-line::after { border: none !important; }