/* Organizational Chart Styling */
.org-chart-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    font-family: 'Cairo', sans-serif;
    overflow-x: auto;
}

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

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

/* Connectors */
.tree li::before, .tree li::after{
    content: '';
    position: absolute; top: 0; right: 50%;
    border-top: 2px solid #333;
    width: 50%; height: 20px;
}
.tree li::after{
    right: auto; left: 50%;
    border-left: 2px solid #333;
}

.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child{ padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after{ border: 0 none; }
.tree li:last-child::before{
    border-right: 2px solid #333;
    border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
    border-radius: 5px 0 0 0;
}

.tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #333;
    width: 0; height: 20px;
}

.tree li .node-box {
    border: 1px solid #ccc;
    padding: 10px;
    text-decoration: none;
    color: #333;
    display: inline-block;
    border-radius: 3px;
    background-color: white;
    min-width: 150px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Photo Styling */
.node-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    display: block;
    object-fit: cover;
    border: 2px solid #ddd;
    background-color: #eee; /* Placeholder color */
}

/* Ensure the node box fits content */
.tree li .node-box {
    min-width: 140px;
    padding: 15px 10px;
    vertical-align: middle;
}

/* Responsive adjustment for small screens */
@media screen and (max-width: 768px) {
    .tree ul {
        flex-direction: column;
        align-items: center;
    }
    .tree li {
        width: 100%;
        padding: 10px 0;
    }
    .tree li::after, .tree li::before, .tree ul ul::before {
        display: none; /* Hide lines on mobile for better readability */
    }
}
/* Section */
.faculty-section {
    background: #0b1220;
    padding: 80px 20px;
    color: #fff;
    text-align: center;
}

.faculty-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.faculty-subtitle {
    font-size: 18px;
    opacity: 0.85;
    margin-bottom: 50px;
}

/* Organization Chart Layout */
.org-chart {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.level {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Box Base */
.box {
    padding: 16px 22px;
    min-width: 220px;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

/* Box Types */
.dekan {
    background: #4f46e5;
}

.deputy {
    background: #9333ea;
}

.office {
    background: #facc15;
    color: #000;
}

.department {
    background: #2563eb;
}

.program {
    background: #0d9488;
}

.admin {
    background: #f59e0b;
    color: #000;
}
/*////////////////////*/
/* Tabs */
.org-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.tab-btn {
    padding: 12px 26px;
    border: none;
    border-radius: 30px;
    background: #e5e7eb;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.tab-btn.active {
    background: #2563eb;
    color: #fff;
}

/* Sections */
.tab-section {
    display: none;
    padding: 60px 20px;
}

.tab-section.active {
    display: block;
}

/* LIGHT MODE FOR FACULTY */
#faculty {
    background: #f8fafc;
    color: #0f172a;
}

/* EXECUTIVE (slightly darker neutral) */
#executive {
    background: #eef2f7;
    color: #0f172a;
}

/* Titles */
.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 10px;
}

.section-subtitle {
    text-align: center;
    opacity: 0.75;
    margin-bottom: 50px;
}

/* Tree adjustments for light mode */
.tree li::before,
.tree li::after,
.tree ul ul::before {
    border-color: #94a3b8;
}

/* Nodes */
.node {
    padding: 14px 22px;
    border-radius: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* Node Colors */
.dekan { background: #2563eb; color: #fff; }
.deputy { background: #7c3aed; color: #fff; }
.department { background: #0ea5e9; color: #fff; }
.program { background: #10b981; color: #fff; }
.admin { background: #f59e0b; color: #000; }

/* Collapse */
.tree ul ul {
    display: none;
}

.tree li.open > ul {
    display: block;
}


/*/////////////////////////*/

.tree li .node-box.header-node { background-color: #f8f9fa; border-bottom: 4px solid #004a99; }
.tree li .node-box.purple-node { background-color: #6a1b9a; color: white; font-weight: bold; }

.node-name { font-weight: bold; font-size: 0.85em; display: block; text-transform: uppercase; }
.node-title { font-size: 0.75em; color: #555; display: block; }
.purple-node .node-title { color: #e1bee7; }