.kelas_top_menus{
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0 0 15px 0;
    margin: 0;
    border-bottom: 1px solid #f96332;
} 
.kelas_top_menus li a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 4px; 
    text-decoration: none;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    gap: 5px;
}
.kelas_top_menus li.active a{ 
    background-color: var(--orange);
    color: #fff;
}
.kelas_top_menus li a:hover{ 
    background-color: var(--yellow); 
}
.alert.alert-success {
    background-color: #30802c;
}
.panel-header {  
    background: #297bce;
    background: -webkit-gradient(linear, left top, right top, from(#297bce), color-stop(60%, #137cb1), to(#1090da)); 
    background: linear-gradient(to right, #297bce 0%, #137cb1 60%, #1090da 100%);
    min-height: 62px;
    height: auto;
}
.panel-header .header .title {
    color: #FFFFFF;
    text-shadow: 0px 0px 10px #222222;
}
.list-custom{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.list-custom > .list-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    background-color: #ffece5;
    border: 1px solid #ffa385;
    padding: 0px 10px;
}
.list-custom > .list-item.disabled{ 
    background-color: #e7e7e7;
    border: 1px solid #f4b6b6;
}
.pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; 
}
.pagination li a{
    padding: 3px 5px;
    font-weight: bold;
    color: grey;
}
.pagination li.active a{
    color: #f55c28;
}
.table-responsive {
    overflow: unset; 
    overflow-x: auto;
    overflow-y: hidden;
}

.item_resul{
    display: flex;
    gap: 10px;
}
.item_resul a{
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
    border-radius: 7px;
    background: #e78282;
    color: #fff;
}
.list_selected{
    padding: 0;
    margin: 0;
    list-style: none;
}
.list_selected li{
    display: block; 
}
.list_selected li i{ 
    color: #f06a3e;
}
.btn-success {
    background-color: #22591f; 
}
.btn-success:hover {
    background-color: #297025; 
} 
.table>thead>tr>th { 
    font-size: inherit;
    font-weight: bold; 
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 5px 7px; 
    font-size: inherit;
}
.sidebar-wrapper li a{
    position: relative;
}
.sidebar-wrapper li a .badge{
    position: absolute;
    right: 10px;
    font-size: small;
    border-radius: 50%;
    min-width: 20px;
    top: calc(50% - 10px);
    text-align: center;
    height: 20px;
    display: inline-block;
}
.siswa-dashboard-header,
.siswa-list-header {
    padding: 63px 30px 28px;
}
.siswa-dashboard-header {
    background: linear-gradient(135deg, #1c7ed6 0%, #11998e 100%);
}
.siswa-list-header {
    background: linear-gradient(135deg, #26547c 0%, #3a7bd5 100%);
}
.siswa-dashboard-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}
.siswa-dashboard-hero__content {
    max-width: 680px;
}
.siswa-dashboard-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.siswa-dashboard-hero .category {
    color: rgba(255,255,255,.92);
    font-size: 15px;
}
.siswa-dashboard-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.siswa-dashboard-status .badge {
    padding: 9px 14px;
    border-radius: 999px;
    color: #205493;
    font-weight: 700;
}
.siswa-dashboard-cta i {
    margin-right: 4px;
}
.siswa-dashboard-content {
    margin-top: 6px;
}
.siswa-stat-card,
.siswa-dashboard-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(28, 61, 90, .08);
}
.siswa-stat-card .card-body {
    padding: 20px;
}
.siswa-stat-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    margin-bottom: 16px;
}
.siswa-stat-card__value {
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: #1f2d3d;
    margin-bottom: 8px;
}
.siswa-stat-card__label {
    color: #6c7a89;
    font-weight: 600;
}
.siswa-dashboard-link {
    border-radius: 999px;
}
.siswa-class-list,
.siswa-history-list,
.siswa-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.siswa-class-list.listing {
    gap: 18px;
}
.siswa-class-item,
.siswa-history-item,
.siswa-action-card {
    border: 1px solid #e8eef5;
    border-radius: 16px;
    background: #fff;
}
.siswa-class-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.siswa-class-item.is-joined {
    border-color: #cde7dc;
}
.siswa-class-item.is-open {
    border-color: #d8e6f6;
}
.siswa-class-item__body {
    flex: 1;
}
.siswa-class-item__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.siswa-class-item__title-row h5 {
    font-weight: 700;
    color: #1f2d3d;
}
.siswa-class-item__action .btn {
    min-width: 142px;
}
.siswa-history-item {
    padding: 18px;
}
.siswa-history-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.badge-neutral {
    background: #eef5ff;
    color: #2563eb;
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 700;
}
.siswa-progress-card .card-body,
.siswa-schedule-card .card-body {
    min-height: 100%;
}
.siswa-progress-layout {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 240px;
}
.siswa-progress-ring {
    --progress: 0;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(#18a957 calc(var(--progress) * 1%), #e9f0f4 0);
    position: relative;
    flex: 0 0 170px;
}
.siswa-progress-ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #edf2f7;
}
.siswa-progress-ring__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.siswa-progress-ring__inner strong {
    font-size: 42px;
    line-height: 1;
    color: #164e63;
}
.siswa-progress-ring__inner span {
    margin-top: 6px;
    color: #6c7a89;
    font-weight: 600;
}
.siswa-progress-copy {
    flex: 1;
}
.siswa-progress-copy h5 {
    font-size: 21px;
    font-weight: 700;
    color: #165e52;
    margin-bottom: 10px;
}
.siswa-progress-copy p {
    color: #546273;
    margin-bottom: 16px;
}
.siswa-progress-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #29435c;
    font-weight: 600;
}
.siswa-progress-meta span i {
    margin-right: 6px;
    color: #2b7a78;
}
.siswa-schedule-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid #e5edf5;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    text-decoration: none;
}
.siswa-schedule-item:hover {
    text-decoration: none;
    border-color: #c8d9ec;
    box-shadow: 0 10px 24px rgba(25, 78, 120, .08);
}
.siswa-schedule-item__date {
    width: 78px;
    flex: 0 0 78px;
    text-align: center;
}
.siswa-schedule-item__date strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    color: #0f4c5c;
}
.siswa-schedule-item__date span {
    display: block;
    margin-top: 4px;
    color: #6c7a89;
    font-weight: 600;
}
.siswa-schedule-item__body {
    flex: 1;
    min-width: 0;
}
.siswa-schedule-item__title {
    color: #12344d;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}
.siswa-schedule-item__subtitle {
    color: #6c7a89;
}
.siswa-schedule-item__status {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.siswa-schedule-item__status.is-live {
    background: #dcfce7;
    color: #166534;
}
.siswa-schedule-item__status.is-upcoming {
    background: #dbeafe;
    color: #1d4ed8;
}
.siswa-schedule-item__status.is-done {
    background: #e5e7eb;
    color: #4b5563;
}
.siswa-action-card {
    height: 100%;
    padding: 22px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.siswa-action-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    margin-bottom: 16px;
}
.siswa-action-card h5 {
    font-weight: 700;
    color: #1f2d3d;
    margin-bottom: 8px;
}
.siswa-action-card p {
    color: #6c7a89;
    min-height: 44px;
}
.siswa-empty-state {
    border: 1px dashed #cbd7e6;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    color: #6c7a89;
    background: #f9fbfd;
}
.siswa-empty-state.compact {
    padding: 24px 18px;
}
.siswa-empty-state i {
    display: block;
    font-size: 28px;
    margin-bottom: 10px;
    color: #4d7dbf;
}
@media (max-width: 991.98px) {
    .siswa-dashboard-header,
    .siswa-list-header {
        padding: 24px 20px;
    }
    .siswa-dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .siswa-dashboard-hero__actions {
        align-items: flex-start;
        width: 100%;
    }
    .siswa-dashboard-cta {
        width: 100%;
    }
    .siswa-progress-layout {
        min-height: 0;
    }
}
@media (max-width: 767.98px) {
    .siswa-class-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .siswa-class-item__action,
    .siswa-class-item__action .btn {
        width: 100%;
    }
    .siswa-action-card p {
        min-height: 0;
    }
    .siswa-progress-layout,
    .siswa-schedule-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .siswa-progress-ring {
        width: 150px;
        height: 150px;
        flex-basis: 150px;
        margin: 0 auto;
    }
    .siswa-progress-copy {
        width: 100%;
    }
    .siswa-schedule-item__date {
        width: auto;
        text-align: left;
    }
    .siswa-schedule-item__status {
        align-self: flex-start;
    }
}