/* ==========================================================
   HSI CONTROL CENTER V2
   Override CSS Lama
   ========================================================== */

/* ---------- HEADER ---------- */

.main-header{

    box-shadow:0 2px 10px rgba(15,23,42,.08);

    position:sticky;
    top:0;
    z-index:100;

}

/* ---------- TAB ---------- */

.kepala{

    padding-top:18px;

}

.tab-navigation{

    gap:8px;

}

.tab-btn{

    border-radius:10px;

    transition:.2s;

}

.tab-btn:hover{

    background:rgba(255,255,255,.04);

}

body.light-mode .tab-btn:hover{

    background:#eef4fb;

}

.tab-btn.active{

    border-radius:10px 10px 0 0;

}

/* ---------- CONTENT ---------- */

.data-container-dashboard{

    padding-top:24px;

}

/* ---------- GROUP ---------- */

.silsilah-group{

    background:var(--bg-card-box);

    border:1px solid var(--border-line);

    border-radius:14px;

    margin-bottom:18px;

    overflow:hidden;

    transition:.2s;

}

.silsilah-group:hover{

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

}

.silsilah-header{

    padding:18px;

}

.silsilah-content{

    padding:0 18px 18px;

}

/* ---------- CARD ---------- */

.card-tugas{

    border-left-width:4px;

    border-radius:14px;

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

    transition:
        transform .2s,
        box-shadow .2s,
        border-color .2s;

}

.card-tugas:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(15,23,42,.08);

}

/* ---------- BADGE ---------- */

.badge{

    border-radius:999px;

    padding:4px 8px;

    font-size:11px;

    letter-spacing:.2px;

}

/* ---------- GRAFIK ---------- */

.card-grafik{

    border-radius:16px;

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

    transition:.2s;

}

.card-grafik:hover{

    transform:translateY(-2px);

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

}

.progress-bar-container{

    border-radius:999px;

}

.progress-bar-fill{

    border-radius:999px;

}

/* ---------- INPUT ---------- */

input,
select,
textarea{

    border-radius:10px;

    transition:.2s;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/* ---------- SCROLLBAR ---------- */

.data-container-dashboard::-webkit-scrollbar{

    width:8px;

}

.data-container-dashboard::-webkit-scrollbar-thumb{

    background:#9ca3af;

    border-radius:20px;

}

.data-container-dashboard::-webkit-scrollbar-track{

    background:transparent;

}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

    .data-container-dashboard{

        padding:16px;

    }

    .grid-tugas{

        gap:10px;

    }

    .grid-grafik{

        grid-template-columns:1fr;

    }

    .silsilah-header{

        padding:14px;

    }

    .silsilah-content{

        padding:0 14px 14px;

    }

    .card-tugas{

        padding:14px;

    }

}