/* =========================================================
 * STRUKTUR ORGANISASI
 * Bagan berbentuk pohon (bukan posisi absolut), sehingga
 * tetap rapi berapa pun jumlah jabatan & panjang nama.
 *
 * Semua aturan bagan diawali ".so-wrapper .so-tree" dan properti
 * tata letak memakai !important, supaya CSS template OPAC
 * (padding/margin ul & li, ukuran img, dll.) tidak dapat
 * menggeser garis dan kartu.
 *
 * Semua garis tebal 2px dan berpusat TEPAT di tengah elemen:
 * rentang [50% - 1px, 50% + 1px].
 * ========================================================= */

.so-wrapper{
    --so-accent:#0ea5a4;
    --so-line:#94a3b8;
    --so-card:#ecfaff;
    --so-gap:28px;   /* jarak vertikal antar tingkat */
    --so-hgap:20px;  /* jarak horizontal antar kartu sejajar */
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width:1500px;
    margin:0 auto;
    padding:0 12px;
    box-sizing:border-box;
    text-align:center;
}
.so-wrapper *, .so-wrapper *::before, .so-wrapper *::after{
    box-sizing:border-box;
}

.so-wrapper .so-container{
    background:#fff;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    padding:36px 24px 28px;
    text-align:center;
}

/* ---------- HEADER ---------- */
.so-wrapper .so-header{
    padding-bottom:22px;
    margin-bottom:26px;
    border-bottom:1px solid #e2e8f0;
}
.so-wrapper .so-logos{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:12px;
}
.so-wrapper img.so-logo{
    height:70px !important;
    width:auto !important;
    max-width:220px !important;
    object-fit:contain;
    margin:0 !important;
}
.so-wrapper .so-title{
    margin:0;
    padding:0;
    font-size:28px;
    font-weight:800;
    color:var(--so-accent);
    line-height:1.35;
    letter-spacing:.3px;
    border:0;
}
.so-wrapper .so-title span{
    display:block;
}
.so-wrapper .so-empty{
    color:#64748b;
    padding:40px 0;
}

/* ---------- AREA BAGAN ---------- */
.so-wrapper .so-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
}
.so-wrapper .so-tree{
    width:max-content;
    min-width:100%;
    display:flex;
    justify-content:center;
    padding:4px 8px 12px;
    margin:0;
}

/* reset total: abaikan gaya ul/li dari template */
.so-wrapper .so-tree ul,
.so-wrapper .so-tree li{
    margin:0 !important;
    float:none !important;
    list-style:none !important;
    text-indent:0 !important;
    background:none !important;
    border:0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    line-height:normal;
}

.so-wrapper .so-tree ul{
    position:relative !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:flex-start !important;
    column-gap:var(--so-hgap) !important;
    row-gap:0 !important;
    padding:var(--so-gap) 0 0 0 !important;
}
.so-wrapper .so-tree > ul{
    padding-top:0 !important;
}
.so-wrapper .so-tree li{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:var(--so-gap) 0 0 0 !important;
}

/* garis penghubung antar saudara */
.so-wrapper .so-tree li::before,
.so-wrapper .so-tree li::after{
    content:'' !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    bottom:auto !important;
    height:var(--so-gap) !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    border-top:2px solid var(--so-line) !important;
    border-radius:0 !important;
    transform:none !important;
}
/* separuh kiri: dari setengah celah kiri sampai tengah (+1px) */
.so-wrapper .so-tree li::before{
    left:calc(var(--so-hgap) / -2) !important;
    right:calc(50% - 1px) !important;
    width:auto !important;
}
/* separuh kanan + garis turun ke kartu, tepat di tengah */
.so-wrapper .so-tree li::after{
    left:calc(50% - 1px) !important;
    right:calc(var(--so-hgap) / -2) !important;
    width:auto !important;
    border-left:2px solid var(--so-line) !important;
}
.so-wrapper .so-tree li:first-child::before{
    border-top:0 !important;
}
.so-wrapper .so-tree li:first-child::after{
    border-top-left-radius:8px !important;
}
.so-wrapper .so-tree li:last-child::after{
    border-top:0 !important;
    border-left:0 !important;
}
.so-wrapper .so-tree li:last-child::before{
    border-right:2px solid var(--so-line) !important;
    border-top-right-radius:8px !important;
}
/* anak tunggal: tanpa garis cabang; garis turun dari atasan sudah menyambung */
.so-wrapper .so-tree li:only-child::before,
.so-wrapper .so-tree li:only-child::after{
    display:none !important;
}
.so-wrapper .so-tree li:only-child{
    padding-top:0 !important;
}
/* garis turun dari atasan ke barisan bawahan */
.so-wrapper .so-tree ul ul::before{
    content:'' !important;
    display:block !important;
    position:absolute !important;
    top:0 !important;
    left:calc(50% - 1px) !important;
    width:2px !important;
    height:var(--so-gap) !important;
    margin:0 !important;
    background:var(--so-line) !important;
    border:0 !important;
    transform:none !important;
}
/* jabatan paling atas: tanpa garis */
.so-wrapper .so-tree > ul > li,
.so-wrapper .so-tree > ul > li:only-child{
    padding-top:0 !important;
}
.so-wrapper .so-tree > ul > li::before,
.so-wrapper .so-tree > ul > li::after{
    display:none !important;
}

/* ---------- KARTU ---------- */
.so-wrapper .so-card{
    position:relative;
    z-index:1;
    display:flex !important;
    align-items:center;
    gap:14px;
    width:260px !important;
    min-height:84px;
    margin:0 !important;
    padding:14px 16px;
    background:var(--so-card);
    border-radius:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    text-align:left;
    transition:transform .2s ease, box-shadow .2s ease;
}
.so-wrapper .so-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.09);
}
.so-wrapper .so-card-leader{
    width:380px !important;
    min-height:100px;
    border-left:5px solid var(--so-accent);
}
.so-wrapper img.so-photo{
    flex:0 0 auto;
    width:54px !important;
    height:54px !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0;
    border-radius:50% !important;
    object-fit:cover;
    object-position:center top;
    background:#e2e8f0;
}
.so-wrapper .so-card-leader img.so-photo{
    width:70px !important;
    height:70px !important;
}
.so-wrapper .so-info{
    min-width:0;
    flex:1 1 auto;
}
.so-wrapper .so-role{
    font-size:12.5px;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.2px;
    line-height:1.3;
}
.so-wrapper .so-name{
    font-weight:600;
    font-size:15.5px;
    color:#0f172a;
    line-height:1.3;
    margin-top:2px;
    overflow-wrap:anywhere;
}
.so-wrapper .so-nip{
    font-size:12px;
    color:#94a3b8;
    margin-top:2px;
    line-height:1.3;
}

/* ---------- STAF SAMPING (mis. Tata Usaha) ----------
 * Grid 3 kolom simetris [1fr | 2px | 1fr]: kolom tengah adalah
 * garis vertikal, tepat segaris dengan pusat kartu atasan. */
.so-wrapper .so-side{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}
.so-wrapper .so-side-item{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr) !important;
    margin:0 !important;
    padding:0 !important;
}
.so-wrapper .so-side-v{
    display:block;
    align-self:stretch;
    width:2px;
    background:var(--so-line);
}
.so-wrapper .so-side-last .so-side-item:last-child .so-side-v{
    align-self:start;
    height:calc(50% + 7px);
}
.so-wrapper .so-side-right{
    display:flex;
    align-items:center;
    padding-top:14px;
    min-width:0;
}
.so-wrapper .so-side-link{
    flex:0 0 26px;
    height:2px;
    background:var(--so-line);
}
.so-wrapper .so-side-right .so-card{
    width:240px !important;
    min-height:76px;
}

/* ---------- MOBILE: daftar bertingkat ---------- */
@media (max-width:768px){
    .so-wrapper .so-container{
        padding:22px 14px;
        border-radius:16px;
    }
    .so-wrapper .so-title{
        font-size:20px;
    }
    .so-wrapper img.so-logo{
        height:52px !important;
    }
    .so-wrapper .so-scroll{
        overflow:visible;
    }
    .so-wrapper .so-tree{
        display:block;
        width:auto;
        min-width:0;
        padding:0;
    }
    .so-wrapper .so-tree ul{
        display:block !important;
        padding:0 0 0 14px !important;
    }
    .so-wrapper .so-tree > ul{
        padding-left:0 !important;
    }
    .so-wrapper .so-tree ul ul::before{
        display:none !important;
    }
    .so-wrapper .so-tree li,
    .so-wrapper .so-tree li:only-child{
        display:block !important;
        padding:10px 0 0 18px !important;
    }
    .so-wrapper .so-tree > ul > li,
    .so-wrapper .so-tree > ul > li:only-child{
        padding:0 !important;
    }
    /* garis vertikal kiri */
    .so-wrapper .so-tree li::before,
    .so-wrapper .so-tree li:first-child::before,
    .so-wrapper .so-tree li:last-child::before,
    .so-wrapper .so-tree li:only-child::before{
        display:block !important;
        left:4px !important;
        right:auto !important;
        top:0 !important;
        bottom:0 !important;
        width:2px !important;
        height:auto !important;
        border:0 !important;
        border-radius:0 !important;
        background:var(--so-line) !important;
    }
    .so-wrapper .so-tree li:last-child::before,
    .so-wrapper .so-tree li:only-child::before{
        bottom:auto !important;
        height:52px !important;
    }
    /* cabang horizontal ke kartu */
    .so-wrapper .so-tree li::after,
    .so-wrapper .so-tree li:first-child::after,
    .so-wrapper .so-tree li:last-child::after,
    .so-wrapper .so-tree li:only-child::after{
        display:block !important;
        left:4px !important;
        right:auto !important;
        top:51px !important;
        width:14px !important;
        height:2px !important;
        border:0 !important;
        border-radius:0 !important;
        background:var(--so-line) !important;
    }
    .so-wrapper .so-tree > ul > li::before,
    .so-wrapper .so-tree > ul > li::after{
        display:none !important;
    }
    .so-wrapper .so-card,
    .so-wrapper .so-card-leader,
    .so-wrapper .so-side-right .so-card{
        width:100% !important;
        min-height:0;
    }
    .so-wrapper .so-card-leader img.so-photo{
        width:58px !important;
        height:58px !important;
    }
    .so-wrapper .so-side{
        padding-left:18px !important;
    }
    .so-wrapper .so-side-item{
        display:block !important;
        position:relative;
    }
    .so-wrapper .so-side-pad,
    .so-wrapper .so-side-v,
    .so-wrapper .so-side-link{
        display:none;
    }
    .so-wrapper .so-side-right{
        display:block;
        padding-top:10px;
    }
    .so-wrapper .so-side-right .so-card{
        border-left:3px dashed var(--so-line);
    }
}

@media print{
    .so-wrapper .so-container{ box-shadow:none; }
    .so-wrapper .so-scroll{ overflow:visible; }
    .so-wrapper .so-card{ box-shadow:none; border:1px solid #cbd5e1; }
}