/* =========================================
   PAGE
========================================= */

.so-page{

    padding:80px 0 100px;

    background:
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #eef4ff 100%
    );

    min-height:100vh;
}

/* =========================================
   SECTION HEADING
========================================= */

.section-heading{

    text-align:center;

    margin-bottom:50px;
}

.page-line{

    width:90px;
    height:6px;

    border-radius:999px;

    margin:0 auto 22px;

    background:
    linear-gradient(
        90deg,
        #2563eb,
        #1d4ed8
    );
}

.section-heading h2{

    font-size:42px;
    font-weight:800;

    letter-spacing:-1px;

    color:#0f172a;

    margin:0;
}

/* =========================================
   CHART WRAPPER
========================================= */

.org-chart-wrapper{

    position:relative;

    background:white;

    border-radius:32px;

    padding:28px;

    overflow:auto;

    border:1px solid #e2e8f0;

    box-shadow:
    0 12px 35px rgba(15,23,42,.05);

    margin-bottom:50px;
}

/* =========================================
   TREE CONTAINER
========================================= */

#tree-container{

    width:max-content;

    min-width:100%;

    min-height:520px;
}

/* =========================================
   NODE
========================================= */

.modern-node{

    width:220px;

    background:white;

    border-radius:22px;

    padding:18px;

    border:1px solid #e2e8f0 !important;

    box-shadow:
    0 8px 22px rgba(15,23,42,.05);

    position:relative;

    transition:none;

    transform:none !important;
}

/* accent top */

.modern-node::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    border-radius:22px 22px 0 0;

    background:
    linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );
}

/* jabatan */

.modern-node .node-name{

    font-size:15px !important;

    font-weight:700 !important;

    line-height:1.5 !important;

    color:#0f172a !important;

    text-align:center;

    margin-bottom:8px !important;
}

/* nama */

.modern-node .node-title{

    font-size:12px !important;

    line-height:1.6 !important;

    color:#64748b !important;

    text-align:center;
}

/* connector */

.Treant .collapse-switch{

    display:none !important;
}

.Treant svg{

    overflow:visible !important;
}

.Treant path{

    stroke:#c7d7ff !important;

    stroke-width:2.5px !important;
}

/* =========================================
   TABLE WRAPPER
========================================= */

.table-wrapper{

    background:white;

    border-radius:24px;

    padding:24px;

    border:1px solid #e2e8f0;

    box-shadow:
    0 8px 24px rgba(15,23,42,.04);
}

/* =========================================
   TABLE TITLE
========================================= */

.table-title{

    margin-bottom:18px;
}

.table-title h3{

    font-size:20px;
    font-weight:700;

    color:#0f172a;

    margin:0;
}

/* =========================================
   TABLE
========================================= */

.so-table{

    margin:0;

    border-collapse:collapse;

    width:100%;
}

/* =========================================
   THEAD
========================================= */

.so-table thead th{

    background:#f8fafc !important;

    color:#334155;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    border-bottom:1px solid #e2e8f0 !important;

    padding:14px 16px !important;

    white-space:nowrap;
}

/* =========================================
   TBODY
========================================= */

.so-table tbody td{

    padding:14px 16px !important;

    vertical-align:middle;

    border-bottom:1px solid #f1f5f9 !important;

    font-size:14px;

    color:#334155;
}

.so-table tbody tr{

    transition:.2s ease;
}

.so-table tbody tr:hover{

    background:#f8fafc;
}

/* =========================================
   NAME
========================================= */

.pegawai-name{

    font-size:14px;

    font-weight:600;

    color:#0f172a;

    margin-bottom:4px;
}

.pegawai-jabatan{

    font-size:12px;

    color:#64748b;
}

/* =========================================
   BADGE
========================================= */

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    background:#eff6ff;

    color:#2563eb;
}

/* =========================================
   EMPTY STATE
========================================= */

.empty-table-state{

    background:white;

    border-radius:28px;

    padding:80px 30px;

    text-align:center;

    border:1px solid #e2e8f0;

    box-shadow:
    0 12px 35px rgba(15,23,42,.04);
}

.empty-icon{

    width:90px;
    height:90px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 22px;

    color:white;

    font-size:34px;
}

.empty-table-state h4{

    font-size:24px;
    font-weight:700;

    color:#0f172a;

    margin-bottom:10px;
}

.empty-table-state p{

    margin:0;

    color:#64748b;

    font-size:14px;

    line-height:1.8;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px){

    .modern-node{

        width:200px;
    }
}

@media(max-width:992px){

    .section-heading h2{

        font-size:34px;
    }

    .org-chart-wrapper{

        padding:20px;
    }

    .table-wrapper{

        padding:18px;
    }

    .modern-node{

        width:190px;
    }
}

@media(max-width:768px){

    .so-page{

        padding:50px 0 80px;
    }

    .section-heading h2{

        font-size:28px;
    }

    .modern-node{

        width:170px;

        padding:16px;
    }

    .modern-node .node-name{

        font-size:13px !important;
    }

    .modern-node .node-title{

        font-size:11px !important;
    }

    .table-title h3{

        font-size:18px;
    }
}

/* =========================================
   FILTER
========================================= */

.filter-wrapper{

    display:flex;

    justify-content:flex-end;

    margin-bottom:24px;
}

.filter-group{

    width:320px;
}

.filter-group label{

    display:block;

    font-size:13px;

    font-weight:600;

    color:#475569;

    margin-bottom:10px;
}

.upt-select{

    height:52px;

    border-radius:16px;

    border:1px solid #dbe2ea;

    font-size:14px;

    box-shadow:none !important;
}

.upt-select:focus{

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,.08) !important;
}

/* =========================================
   ORG CARD
========================================= */

.org-card{

    text-align:center;
}

/* photo */

.org-photo{

    width:78px;
    height:78px;

    border-radius:999px;

    overflow:hidden;

    margin:0 auto 14px;

    border:4px solid #eff6ff;

    box-shadow:
    0 6px 18px rgba(37,99,235,.12);
}

.org-photo img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* jabatan */

.org-jabatan{

    font-size:13px;

    font-weight:700;

    line-height:1.6;

    color:#0f172a;

    margin-bottom:10px;
}

/* nama */

.org-nama{

    font-size:14px;

    font-weight:600;

    color:#2563eb;

    margin-bottom:6px;
}

/* nip */

.org-nip{

    font-size:11px;

    color:#64748b;
}

/* =========================================
   TABLE PROFILE
========================================= */

.pegawai-profile{

    display:flex;

    align-items:center;

    gap:14px;
}

.pegawai-photo{

    width:52px;
    height:52px;

    border-radius:999px;

    overflow:hidden;

    flex-shrink:0;

    border:3px solid #eff6ff;
}

.pegawai-photo img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.pegawai-nip{

    font-size:12px;

    color:#64748b;
}

/* =========================================
   BUP
========================================= */

.bup-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    background:#eff6ff;

    color:#2563eb;

    font-size:12px;

    font-weight:700;
}