.process-step {
    border: 5px #ebebeb solid;
    border-radius: 100%;
    line-height: 0;
    background: #959595;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-self: center;
    display: flex;
    color: #fff;
    width: 45px;
    height: 45px;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 7px;
    margin-right: 5px;
    z-index: 4;
    cursor: pointer;
}

.process-step:hover{
    border: 5px #d8d8d8 solid;
}

.process-step-active {
    background-color: #f89828;
}

/* Klinik Pelangi Hati design system */
:root {
    --clinic-primary: #1F5AA6;
    --clinic-primary-dark: #163E73;
    --clinic-primary-soft: #eaf2fb;
    --clinic-ink: #163E73;
    --clinic-muted: #65748B;
    --clinic-surface: #ffffff;
    --clinic-canvas: #FAFBFC;
    --clinic-coral: #E94B4B;
    --clinic-yellow: #F6C73B;
    --clinic-blue: #1F5AA6;
    --clinic-purple: #163E73;
    --clinic-success: #76B947;
    --clinic-border: #E2E8F0;
    --clinic-shadow: 0 12px 34px rgba(22, 62, 115, .09);
}

body {
    color: var(--clinic-ink);
    background: var(--clinic-canvas);
}

a { color: var(--clinic-primary); }
a:hover { color: var(--clinic-primary-dark); }

.btn-primary,
.bg-primary,
.badge-primary {
    background-color: var(--clinic-primary) !important;
    border-color: var(--clinic-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--clinic-primary-dark) !important;
    border-color: var(--clinic-primary-dark) !important;
    box-shadow: 0 5px 16px rgba(31, 90, 166, .25) !important;
}
.text-primary { color: var(--clinic-primary) !important; }
.border-left-primary { border-left-color: var(--clinic-primary) !important; }
.text-success { color: var(--clinic-success) !important; }
.bg-success, .badge-success { background-color: var(--clinic-success) !important; }
.border-left-success { border-left-color: var(--clinic-success) !important; }
.text-danger { color: var(--clinic-coral) !important; }
.bg-danger, .badge-danger { background-color: var(--clinic-coral) !important; }
.border-left-info { border-left-color: var(--clinic-blue) !important; }
.border-left-warning { border-left-color: var(--clinic-yellow) !important; }

.clinic-panel #content-wrapper,
.clinic-panel #content { background: var(--clinic-canvas); }
.clinic-content { padding-bottom: 2rem; }

.clinic-panel .card {
    border: 1px solid rgba(220, 233, 230, .9) !important;
    border-radius: 1rem;
    box-shadow: 0 7px 22px rgba(24, 75, 70, .06);
    overflow: visible;
}
.clinic-panel .card-header {
    color: var(--clinic-ink);
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--clinic-border);
}
.clinic-panel .card-header:first-child { border-radius: 1rem 1rem 0 0; }
.clinic-panel .form-control,
.clinic-panel .custom-select {
    border-color: var(--clinic-border);
    border-radius: .65rem;
}
.clinic-panel .form-control:focus,
.clinic-panel .custom-select:focus {
    border-color: var(--clinic-primary);
    box-shadow: 0 0 0 .2rem rgba(31, 90, 166, .12);
}
.clinic-panel .btn { border-radius: .65rem; }
.clinic-panel .table thead th {
    color: var(--clinic-primary-dark);
    background: #F4F7FB;
    border-bottom: 1px solid var(--clinic-border);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.clinic-panel .table td { border-top-color: #e7efed; vertical-align: middle; }
.clinic-panel .dropdown-menu {
    border: 1px solid var(--clinic-border);
    border-radius: .85rem;
    box-shadow: var(--clinic-shadow) !important;
}

/* Navigation */
#accordionSidebar {
    position: relative;
    background: #FFFFFF;
    box-shadow: 8px 0 30px rgba(22, 62, 115, .08);
}
#accordionSidebar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--clinic-coral) 0 25%, var(--clinic-yellow) 25% 50%, var(--clinic-success) 50% 75%, var(--clinic-blue) 75%);
}
#accordionSidebar .sidebar-brand { height: 5rem; text-transform: none; letter-spacing: 0; }
.clinic-sidebar-logo { width: 145px; height: 68px; object-fit: contain; }
#accordionSidebar .sidebar-brand-text { line-height: 1.05; }
#accordionSidebar .sidebar-brand-text strong { display: block; font-size: .95rem; letter-spacing: .01em; }
#accordionSidebar .sidebar-brand-text small { display: block; margin-top: .28rem; font-size: .58rem; font-weight: 600; letter-spacing: .11em; opacity: .72; text-transform: uppercase; }
.clinic-brand-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    color: #fff;
    background: linear-gradient(135deg, var(--clinic-coral), var(--clinic-yellow));
    border-radius: .85rem;
    box-shadow: 0 7px 16px rgba(238, 111, 114, .25);
}
#accordionSidebar .nav-item .nav-link { border-radius: .65rem; margin: .08rem .65rem; width: auto; }
#accordionSidebar .sidebar-brand { color: var(--clinic-primary-dark); }
#accordionSidebar .nav-item .nav-link { color: #3D4F68; }
#accordionSidebar .nav-item .nav-link i { color: #718096; }
#accordionSidebar .nav-item .nav-link:hover { background: var(--clinic-primary-soft); color: var(--clinic-primary-dark); }
#accordionSidebar .nav-item.active .nav-link { background: var(--clinic-primary); color: #fff; box-shadow: 0 8px 18px rgba(31,90,166,.22); }
#accordionSidebar .nav-item.active .nav-link i { color: #fff; }
#accordionSidebar .sidebar-heading { color: #8A99AD; letter-spacing: .08em; }
#accordionSidebar .collapse-inner { border: 1px solid var(--clinic-border); box-shadow: var(--clinic-shadow); }
#accordionSidebar .sidebar-divider { border-top-color: var(--clinic-border); }
.clinic-sidebar-backdrop { display: none; }

.clinic-topbar {
    height: 5rem;
    border-bottom: 1px solid var(--clinic-border);
    box-shadow: 0 6px 24px rgba(24, 75, 70, .06) !important;
}
.clinic-page-brand { display: flex; flex-direction: column; line-height: 1.15; }
.clinic-page-brand__eyebrow { color: var(--clinic-primary); font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.clinic-page-brand__title { color: var(--clinic-ink); font-size: 1rem; font-weight: 700; }
.clinic-topbar .img-profile { width: 2.4rem !important; height: 2.4rem !important; color: var(--clinic-primary) !important; background: var(--clinic-primary-soft) !important; }

/* Login */
.clinic-auth-page { min-height: 100vh; background: #FAFBFC; }
.clinic-login { position: relative; display: flex; min-height: 100vh; align-items: center; padding: 2.25rem 0; overflow: hidden; }
.clinic-login::before,
.clinic-login::after { content: ""; position: absolute; border-radius: 999px; filter: blur(2px); opacity: .7; }
.clinic-login::before { width: 32rem; height: 32rem; right: -12rem; top: -15rem; background: rgba(244,189,79,.18); }
.clinic-login::after { width: 26rem; height: 26rem; left: -12rem; bottom: -14rem; background: rgba(79,159,201,.16); }
.clinic-login__rainbow { position: fixed; z-index: 5; inset: 0 0 auto; height: 7px; background: linear-gradient(90deg, var(--clinic-coral) 0 25%, var(--clinic-yellow) 25% 50%, var(--clinic-success) 50% 75%, var(--clinic-blue) 75%); }
.clinic-login__container { position: relative; z-index: 1; }
.clinic-login__card { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); max-width: 1080px; min-height: 650px; margin: 0 auto; background: var(--clinic-surface); border: 1px solid var(--clinic-border); border-radius: 1.6rem; overflow: hidden; box-shadow: 0 28px 70px rgba(22,62,115,.16); }
.clinic-login__welcome { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 3.2rem; color: #fff; background: linear-gradient(145deg, #163E73, #1F5AA6 68%, #2D6DB8); overflow: hidden; }
.clinic-login__welcome::before { content: ""; position: absolute; width: 24rem; height: 24rem; right: -9rem; bottom: -10rem; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 3.5rem rgba(255,255,255,.035), 0 0 0 7rem rgba(255,255,255,.025); }
.clinic-login__brand { position: relative; display: flex; align-items: center; gap: .9rem; }
.clinic-login__brand img { width: 190px; height: 96px; padding: .4rem .7rem; object-fit: contain; background: #fff; border-radius: 1rem; }
.clinic-login__brand strong { display: block; font-size: 1.15rem; }
.clinic-login__brand small { display: block; margin-top: .12rem; opacity: .72; letter-spacing: .09em; text-transform: uppercase; }
.clinic-brand-mark--large { width: 3.15rem; height: 3.15rem; font-size: 1.25rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); box-shadow: none; }
.clinic-login__message { position: relative; max-width: 31rem; }
.clinic-pill { display: inline-block; margin-bottom: 1.25rem; padding: .55rem .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; text-transform: uppercase; }
.clinic-login__message h1 { color: #fff; margin-bottom: 1.25rem; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.clinic-login__message p { max-width: 30rem; margin: 0; color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.8; }
.clinic-login__values { position: relative; display: flex; flex-wrap: wrap; gap: .7rem 1.15rem; color: rgba(255,255,255,.85); font-size: .78rem; }
.clinic-login__values i { margin-right: .3rem; color: var(--clinic-yellow); }
.clinic-login__form-panel { display: flex; align-items: center; padding: 3.5rem; }
.clinic-login__form-wrap { width: 100%; max-width: 390px; margin: auto; }
.clinic-login__form-wrap h2 { margin-bottom: .6rem; color: var(--clinic-ink); font-size: 1.8rem; font-weight: 800; letter-spacing: -.025em; }
.clinic-kicker { margin-bottom: .5rem; color: var(--clinic-primary); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.clinic-login__form-wrap label { color: var(--clinic-primary-dark); font-size: .78rem; font-weight: 700; }
.clinic-login__form-wrap .form-control-user { height: 3.15rem; padding: .75rem 1.1rem !important; border: 1px solid var(--clinic-border); border-radius: .8rem !important; font-size: .88rem !important; }
.clinic-login__form-wrap .form-control-user:focus { border-color: var(--clinic-primary); box-shadow: 0 0 0 .2rem rgba(31,90,166,.12); }
.clinic-login__mobile-brand img { width: 150px; height: 76px; object-fit: contain; }
.clinic-login__submit { min-height: 3.1rem; margin-top: 1.3rem; border-radius: .8rem !important; font-weight: 700; }
.clinic-login__help { margin: 1.8rem 0 0; padding-top: 1.2rem; color: var(--clinic-muted); border-top: 1px solid var(--clinic-border); font-size: .73rem; text-align: center; }
.clinic-login__mobile-brand { display: none; }

.clinic-mentor-note {
    padding: 1rem 1.1rem;
    color: var(--clinic-ink);
    background: linear-gradient(135deg, #f4fbf9, #fffdf6);
    border: 1px solid var(--clinic-border);
    border-left: 4px solid var(--clinic-primary);
    border-radius: .8rem;
}
.clinic-mentor-note:last-child { margin-bottom: 0 !important; }
.clinic-mentor-note__body { color: #4e6765; line-height: 1.65; }
.clinic-mentor-note__body > :last-child { margin-bottom: 0; }
.clinic-register { padding: 2.5rem 0; }
.clinic-register__card { display:grid; grid-template-columns:.8fr 1.2fr; max-width:1080px; margin:auto; background:#fff; border-radius:1.5rem; overflow:hidden; box-shadow:var(--clinic-shadow); }
.clinic-register__intro { padding:3rem; color:#fff; background:linear-gradient(145deg,var(--clinic-primary-dark),var(--clinic-primary)); }
.clinic-register__intro h1 { color:#fff; font-weight:800; }
.clinic-register__intro p { color:rgba(255,255,255,.8); line-height:1.7; }
.clinic-register__steps { margin:2rem 0 0; padding-left:1.25rem; line-height:2.2; }
.clinic-register__form { padding:3rem; }
.clinic-register__form h2 { font-weight:800; color:var(--clinic-ink); }
.clinic-register__form label { font-size:.78rem; font-weight:700; color:#385856; }
.clinic-register__form .form-control { min-height:46px; border-color:var(--clinic-border); border-radius:.65rem; }
.clinic-file-input { padding:1rem; border:1px dashed var(--clinic-primary); border-radius:.7rem; background:var(--clinic-primary-soft); }
.clinic-file-input input { display:block; width:100%; }
.clinic-file-input small { display:block; margin-top:.5rem; color:var(--clinic-muted); }
@media(max-width:767.98px){.clinic-register__card{display:block}.clinic-register__intro{padding:2rem}.clinic-register__steps{display:none}.clinic-register__form{padding:2rem 1.25rem}}

.clinic-table-actions { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
.clinic-table-actions .btn { min-width: 2.15rem; }
.dataTables_wrapper { width: 100%; text-align: left; }
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--clinic-border); border-radius: .55rem; }
.dataTables_wrapper .dataTables_processing { z-index: 20; color: var(--clinic-primary); background: rgba(255,255,255,.94); border: 1px solid var(--clinic-border); border-radius: .75rem; box-shadow: var(--clinic-shadow); }
.clinic-panel td .dropdown-menu { z-index: 1060; }
.participant-report-intro { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; background:linear-gradient(135deg,var(--clinic-primary-soft),#fffaf0); border:1px solid var(--clinic-border); border-radius:1rem; }
.participant-report-average { min-width:130px; padding:.8rem 1rem; text-align:center; color:#fff; background:var(--clinic-primary); border-radius:.85rem; }
.participant-report-average small,.participant-report-average strong { display:block; }.participant-report-average strong{font-size:1.55rem;}
.participant-report-table td { vertical-align:middle !important; }
.participant-identity { display:flex; align-items:center; min-width:190px; gap:.75rem; text-align:left; }.participant-identity small{display:block;color:var(--clinic-muted);font-size:.7rem;}
.participant-avatar { display:flex; flex:0 0 2.7rem; width:2.7rem; height:2.7rem; align-items:center; justify-content:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--clinic-primary),var(--clinic-blue)); border-radius:.85rem; }
.participant-progress { min-width:145px; font-size:.72rem; }.participant-progress .progress{height:.5rem;margin-top:.45rem;background:#e4efed;}.participant-progress .progress-bar{background:var(--clinic-primary);}
.participant-score { display:inline-flex; min-width:64px; padding:.55rem; flex-direction:column; text-align:center; color:#966b13; background:#fff4d9; border-radius:.75rem; }.participant-score.is-pass{color:var(--clinic-primary-dark);background:var(--clinic-primary-soft);}.participant-score strong{font-size:1.1rem;}.participant-score small{font-size:.6rem;}
.participant-quiz-list { min-width:280px; }.participant-quiz-item { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem 0; border-bottom:1px solid var(--clinic-border); text-align:left; }.participant-quiz-item:last-child{border-bottom:0}.participant-quiz-item strong{display:block;font-size:.78rem;margin-bottom:.2rem;}
@media(max-width:767.98px){.participant-report-intro{align-items:flex-start}.participant-report-wrapper{overflow:visible}.participant-report-table{display:block!important;white-space:normal!important}.participant-report-table thead{display:none}.participant-report-table tbody,.participant-report-table tr,.participant-report-table td{display:block!important;width:100%!important}.participant-report-table tr{margin-bottom:1rem;padding:.35rem 1rem;background:#fff;border:1px solid var(--clinic-border);border-radius:1rem;box-shadow:0 6px 18px rgba(24,75,70,.06)}.participant-report-table td{padding:.85rem 0!important;border:0!important;border-bottom:1px solid var(--clinic-border)!important}.participant-report-table td:last-child{border-bottom:0!important}.participant-report-table td::before{content:attr(data-label);display:block;margin-bottom:.45rem;color:var(--clinic-muted);font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.participant-quiz-list{min-width:0}.participant-quiz-item{align-items:flex-start}.participant-report-average{min-width:100px}}

@media (max-width: 767.98px) {
    html, body { max-width: 100%; overflow-x: hidden; }

    #wrapper { display: flex; min-width: 0; }
    #content-wrapper { min-width: 0; width: 100%; }
    #content { min-width: 0; }

    /* Sidebar menjadi drawer ringkas dan tidak mendorong konten keluar layar. */
    #accordionSidebar {
        position: fixed;
        z-index: 1050;
        inset: 0 auto 0 0;
        width: 14.5rem !important;
        min-height: 100vh;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    body.mobile-sidebar-open #accordionSidebar { width: 14.5rem !important; transform: translateX(0); }
    .clinic-sidebar-backdrop {
        position: fixed;
        z-index: 1040;
        inset: 0;
        display: block;
        padding: 0;
        background: rgba(10, 38, 37, .48);
        border: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    body.mobile-sidebar-open .clinic-sidebar-backdrop { opacity: 1; visibility: visible; }
    body.mobile-sidebar-open { overflow: hidden; }
    #accordionSidebar .sidebar-brand-text { display: block; }
    #accordionSidebar .nav-item .nav-link { display: flex; align-items: center; width: auto; padding: .8rem; text-align: left; }
    #accordionSidebar .nav-item .nav-link i { margin-right: .7rem; font-size: .9rem; }
    #accordionSidebar .nav-item .nav-link span { display: inline; font-size: .78rem; }
    #accordionSidebar .sidebar-heading { padding: 0 1.45rem; text-align: left; }
    #accordionSidebar .sidebar-brand { height: 4rem; padding: .75rem .35rem; }
    #accordionSidebar .sidebar-brand-icon i { font-size: 1.4rem; }

    .topbar { height: 4.25rem; padding: 0 .5rem; }
    .topbar #sidebarToggleTop { margin-right: .25rem !important; }
    .topbar .navbar-nav .nav-item .nav-link { padding-left: .55rem; padding-right: .55rem; }

    .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .row { margin-left: -.375rem; margin-right: -.375rem; }
    .row > [class*="col-"] { padding-left: .375rem; padding-right: .375rem; }

    .card { max-width: 100%; }
    .card-header { padding: .75rem; }
    .card-header.d-flex { flex-wrap: wrap !important; gap: .5rem; }
    .card-header.d-flex > h6 { flex: 1 1 100%; line-height: 1.4; }
    .card-body { padding: .85rem; }
    .card-footer { padding: .65rem .5rem; }
    .card-footer a {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
        font-size: .78rem;
    }

    .card-img-top {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 96px;
        margin: 0 auto;
        object-fit: contain;
    }

    /* Seluruh tabel lama tetap dapat dipakai tanpa membuat halaman melebar. */
    .table-responsive,
    .card-body table,
    .card > table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .card-body table thead,
    .card-body table tbody,
    .card-body table tfoot { width: max-content; min-width: 100%; }
    table .btn { white-space: nowrap; }

    .form-group.row > [class*="col-"] { margin-bottom: .75rem; }
    .form-control, .custom-select, .btn { min-height: 42px; }
    .form-control-user { min-height: 46px; }
    input[type="file"] { width: 100%; max-width: 100%; overflow: hidden; }
    .jqte, .jqte_editor { max-width: 100%; }
    .btn-icon-split { margin: 0 .25rem .35rem 0 !important; }

    video, iframe, img, canvas, svg { max-width: 100%; }
    video, iframe { width: 100%; }
    .embed-responsive iframe { height: 100%; }
    img { height: auto; }

    .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
    .modal-body { padding: .85rem; overflow-x: auto; }
    .pagination { flex-wrap: wrap; }

    /* Debug toolbar tidak menutupi tombol aplikasi ketika development dibuka dari ponsel. */
    .phpdebugbar { display: none !important; }

    .p-4 { padding: 1rem !important; }
    .m-4 { margin: 1rem !important; }
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.45rem; }
    h3 { font-size: 1.25rem; }

    .clinic-login { padding: 1.25rem 0; }
    .clinic-login__container { padding-left: 1rem; padding-right: 1rem; }
    .clinic-login__card { display: block; min-height: 0; max-width: 520px; border-radius: 1.25rem; }
    .clinic-login__welcome { display: none; }
    .clinic-login__form-panel { padding: 2.25rem 1.5rem; }
    .clinic-login__mobile-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 2rem; color: var(--clinic-ink); font-weight: 800; }
    .clinic-login__mobile-brand .clinic-brand-mark { width: 2.6rem; height: 2.6rem; }
}

@media (max-width: 479.98px) {
    .clinic-page-brand__eyebrow { font-size: .56rem; }
    .clinic-page-brand__title { font-size: .84rem; }
    .topbar .badge-counter { transform: scale(.9); }
    .card-body { padding: .7rem; }
    .btn:not(.btn-circle) { white-space: normal; }
}

@media (orientation: landscape) and (max-height: 500px) {
    #accordionSidebar { min-height: 100%; }
}

.clinic-media-embed {
    width: 100%;
    overflow: hidden;
    border-radius: .65rem;
    background: #f7faf9;
}

.clinic-media-embed iframe {
    width: 100%;
    border: 0;
}

.clinic-document-embed {
    height: min(70vh, 680px);
    min-height: 420px;
}

@media (max-width: 575.98px) {
    .clinic-document-embed {
        height: 62vh;
        min-height: 320px;
    }
}

@media (max-width: 767.98px) {
    .participant-report-wrapper,
    .card-body .participant-report-table { overflow: visible; white-space: normal; }
    .card-body .participant-report-table thead { display: none !important; }
    .card-body .participant-report-table tbody,
    .card-body .participant-report-table tfoot { width: 100%; min-width: 0; }
}

/* Role dashboards */
.dashboard-shell { max-width: 1480px; margin: 0 auto; }
.dashboard-hero { position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; min-height:205px; margin-bottom:1.5rem; padding:2.25rem 2.5rem; color:#fff; border-radius:1.35rem; overflow:hidden; box-shadow:0 18px 45px rgba(18,83,78,.16); }
.dashboard-hero::before,.dashboard-hero::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.14); border-radius:50%; pointer-events:none; }
.dashboard-hero::before { width:310px; height:310px; right:-90px; top:-165px; box-shadow:0 0 0 48px rgba(255,255,255,.035); }
.dashboard-hero::after { width:150px; height:150px; right:27%; bottom:-115px; }
.dashboard-hero--admin { background:linear-gradient(125deg,#163E73,#1F5AA6 68%,#2D6DB8); }
.dashboard-hero--mentor { background:linear-gradient(125deg,#163E73,#1F5AA6 68%,#2D6DB8); }
.dashboard-hero--student { background:linear-gradient(125deg,#163E73,#1F5AA6 68%,#2D6DB8); }
.dashboard-hero > * { position:relative; z-index:1; }
.dashboard-hero h1 { margin:.25rem 0 .65rem; color:#fff; font-size:clamp(1.7rem,3vw,2.45rem); font-weight:800; letter-spacing:-.035em; }
.dashboard-hero p { max-width:680px; margin:0; color:rgba(255,255,255,.8); line-height:1.7; }
.dashboard-eyebrow { color:var(--clinic-primary); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.dashboard-hero .dashboard-eyebrow { color:var(--clinic-yellow); }
.dashboard-hero__actions { display:flex; flex:0 0 auto; gap:.65rem; }
.dashboard-hero__actions .btn { min-height:44px; padding:.65rem 1rem; font-weight:700; white-space:nowrap; }
.dashboard-hero__actions .btn-outline-light { border-color:rgba(255,255,255,.5); }
.dashboard-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.5rem; }
.dashboard-stat { display:flex; min-width:0; min-height:112px; align-items:center; gap:1rem; padding:1.15rem; color:var(--clinic-ink); background:#fff; border:1px solid var(--clinic-border); border-radius:1rem; box-shadow:0 7px 22px rgba(24,75,70,.055); transition:transform .18s ease,box-shadow .18s ease; }
a.dashboard-stat:hover { color:var(--clinic-ink); text-decoration:none; transform:translateY(-2px); box-shadow:var(--clinic-shadow); }
.dashboard-stat__icon { display:flex; flex:0 0 3rem; width:3rem; height:3rem; align-items:center; justify-content:center; border-radius:.9rem; font-size:1.15rem; }
.dashboard-stat__icon.is-teal { color:var(--clinic-primary); background:var(--clinic-primary-soft); }
.dashboard-stat__icon.is-blue { color:#397fa5; background:#e8f4fa; }
.dashboard-stat__icon.is-yellow { color:#a87917; background:#fff4d9; }
.dashboard-stat__icon.is-coral { color:#c9585d; background:#fff0ef; }
.dashboard-stat span:last-child { min-width:0; }
.dashboard-stat small,.dashboard-stat strong { display:block; }
.dashboard-stat small { color:var(--clinic-muted); font-size:.72rem; font-weight:700; }
.dashboard-stat strong { margin-top:.15rem; font-size:1.65rem; line-height:1.1; }
.dashboard-main-grid { margin-bottom:0; }
.dashboard-panel { padding:1.35rem; background:#fff; border:1px solid var(--clinic-border); border-radius:1.1rem; box-shadow:0 7px 22px rgba(24,75,70,.055); }
.dashboard-panel__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.dashboard-panel__header h2 { margin:.18rem 0 0; color:var(--clinic-ink); font-size:1.15rem; font-weight:800; }
.dashboard-panel__header > a { font-size:.76rem; font-weight:700; white-space:nowrap; }
.dashboard-program-row,.dashboard-learner-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:.9rem; padding:.9rem .2rem; color:var(--clinic-ink); border-bottom:1px solid #e8f0ee; }
.dashboard-program-row:last-child,.dashboard-learner-row:last-child { border-bottom:0; }
.dashboard-program-row:hover,.dashboard-learner-row:hover { color:var(--clinic-primary); text-decoration:none; }
.dashboard-program-row__icon,.dashboard-course-card__icon { display:flex; flex:0 0 2.75rem; width:2.75rem; height:2.75rem; align-items:center; justify-content:center; color:var(--clinic-primary); background:var(--clinic-primary-soft); border-radius:.8rem; }
.dashboard-program-row__copy strong,.dashboard-program-row__copy small,.dashboard-program-row__meta strong,.dashboard-program-row__meta small,.dashboard-learner-row > span:nth-child(2) strong,.dashboard-learner-row > span:nth-child(2) small,.dashboard-count strong,.dashboard-count small { display:block; }
.dashboard-program-row__copy small,.dashboard-program-row__meta small,.dashboard-learner-row small,.dashboard-count small { margin-top:.15rem; color:var(--clinic-muted); font-size:.68rem; }
.dashboard-program-row__meta,.dashboard-count { min-width:58px; text-align:center; }
.dashboard-alert { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; margin-bottom:.75rem; padding:.9rem; color:var(--clinic-ink); border-radius:.85rem; }
.dashboard-alert:hover { color:var(--clinic-ink); text-decoration:none; transform:translateX(2px); }
.dashboard-alert.is-warning { background:#fff7e5; }.dashboard-alert.is-teal{background:var(--clinic-primary-soft);}
.dashboard-alert > span { display:flex; width:2.35rem; height:2.35rem; align-items:center; justify-content:center; background:rgba(255,255,255,.72); border-radius:.65rem; }
.dashboard-alert strong,.dashboard-alert small { display:block; }.dashboard-alert small{margin-top:.15rem;color:var(--clinic-muted);font-size:.68rem;}
.dashboard-progress-card { display:flex; align-items:center; gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--clinic-border); }
.dashboard-progress-card strong,.dashboard-progress-card small { display:block; }.dashboard-progress-card small{margin-top:.25rem;color:var(--clinic-muted);font-size:.68rem;line-height:1.5;}
.dashboard-progress-ring { --progress:0; display:grid; flex:0 0 74px; width:74px; height:74px; place-items:center; background:conic-gradient(var(--clinic-primary) calc(var(--progress)*1%),#e5efed 0); border-radius:50%; }
.dashboard-progress-ring::before { content:""; grid-area:1/1; width:58px; height:58px; background:#fff; border-radius:50%; }.dashboard-progress-ring span{z-index:1;grid-area:1/1;font-size:.78rem;font-weight:800;}
.dashboard-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
.dashboard-action-grid a { display:flex; align-items:center; gap:.8rem; padding:1rem; color:var(--clinic-ink); background:#f7faf9; border:1px solid var(--clinic-border); border-radius:.85rem; }
.dashboard-action-grid a:hover { color:var(--clinic-primary); background:var(--clinic-primary-soft); text-decoration:none; }.dashboard-action-grid a>i{width:1.5rem;color:var(--clinic-primary);font-size:1.1rem;text-align:center;}.dashboard-action-grid strong,.dashboard-action-grid small{display:block}.dashboard-action-grid small{margin-top:.18rem;color:var(--clinic-muted);font-size:.65rem;}
.dashboard-avatar { display:flex; width:2.75rem;height:2.75rem;align-items:center;justify-content:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--clinic-primary),var(--clinic-blue));border-radius:.85rem; }
.dashboard-course-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.8rem; margin-bottom:.75rem; padding:.9rem; color:var(--clinic-ink); background:#f8fbfa; border:1px solid var(--clinic-border); border-radius:.85rem; }.dashboard-course-card:hover{color:var(--clinic-primary);text-decoration:none}.dashboard-course-card strong,.dashboard-course-card small{display:block}.dashboard-course-card small{margin-top:.2rem;color:var(--clinic-muted);font-size:.68rem;}
.dashboard-empty { padding:2.25rem 1rem; color:var(--clinic-muted); text-align:center; }.dashboard-empty i{margin-bottom:.7rem;color:#aac3bf;font-size:2rem}.dashboard-empty p{max-width:390px;margin:0 auto;font-size:.78rem;line-height:1.6;}
.dashboard-student-course { margin-bottom:.9rem; padding:1rem; background:#f9fbfb; border:1px solid var(--clinic-border); border-radius:.95rem; }.dashboard-student-course:last-child{margin-bottom:0}.dashboard-student-course__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.85rem}.dashboard-student-course__top strong,.dashboard-student-course__top small{display:block}.dashboard-student-course__top small{margin-top:.2rem;color:var(--clinic-muted);font-size:.68rem}.dashboard-progress-value{color:var(--clinic-primary);font-size:1rem;font-weight:800}.dashboard-student-course .progress{height:.55rem;margin:1rem 0 .7rem;background:#e3eeec;border-radius:1rem}.dashboard-student-course .progress-bar{background:linear-gradient(90deg,var(--clinic-primary),#44b395)}.dashboard-student-course__footer{display:flex;justify-content:space-between;gap:1rem}.dashboard-student-course__footer small{color:var(--clinic-muted)}.dashboard-student-course__footer a{font-size:.72rem;font-weight:700;}
.dashboard-focus-card { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(180deg,#fff,#faf8fd); }.dashboard-focus-card__icon{display:flex;width:3.3rem;height:3.3rem;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--clinic-purple);background:#f1ecf8;border-radius:1rem;font-size:1.25rem}.dashboard-focus-card h2{margin:.4rem 0 .7rem;font-size:1.25rem;font-weight:800}.dashboard-focus-card p{max-width:320px;color:var(--clinic-muted);font-size:.78rem;line-height:1.65}.dashboard-progress-ring--large{flex-basis:118px;width:118px;height:118px;margin:1rem 0 1.35rem;background:conic-gradient(var(--clinic-purple) calc(var(--progress)*1%),#eee9f4 0)}.dashboard-progress-ring--large::before{width:92px;height:92px}.dashboard-progress-ring--large span{font-size:1.15rem;}
@media(max-width:991.98px){.dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-hero{align-items:flex-start;flex-direction:column}.dashboard-hero__actions{width:100%}}
@media(max-width:575.98px){.dashboard-hero{min-height:0;padding:1.5rem 1.2rem;border-radius:1rem}.dashboard-hero h1{font-size:1.6rem}.dashboard-hero p{font-size:.82rem}.dashboard-hero__actions{display:grid;grid-template-columns:1fr}.dashboard-stat-grid{grid-template-columns:1fr 1fr;gap:.65rem}.dashboard-stat{min-height:92px;gap:.65rem;padding:.8rem}.dashboard-stat__icon{flex-basis:2.55rem;width:2.55rem;height:2.55rem}.dashboard-stat small{font-size:.61rem}.dashboard-stat strong{font-size:1.3rem}.dashboard-panel{padding:1rem;border-radius:.95rem}.dashboard-panel__header{align-items:flex-start}.dashboard-program-row,.dashboard-learner-row{grid-template-columns:auto minmax(0,1fr) auto}.dashboard-program-row__meta,.dashboard-count{display:none}.dashboard-action-grid{grid-template-columns:1fr}.dashboard-student-course__footer{align-items:flex-start;flex-direction:column;gap:.45rem}.dashboard-progress-card{align-items:flex-start}.dashboard-course-card{padding:.8rem}}

/* My Course */
.my-course-shell{max-width:1440px;margin:0 auto 2rem}.my-course-hero{position:relative;display:flex;min-height:210px;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1.7rem;padding:2.2rem 2.5rem;color:#fff;background:linear-gradient(125deg,#6f5797,#8e73b2 58%,#af8bc5);border-radius:1.35rem;box-shadow:0 18px 44px rgba(83,62,115,.16);overflow:hidden}.my-course-hero.is-mentor{background:linear-gradient(125deg,#155e69,#25828a 62%,#4ca4a4)}.my-course-hero::after{content:"";position:absolute;width:310px;height:310px;right:-80px;top:-160px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 48px rgba(255,255,255,.04)}.my-course-hero>*{position:relative;z-index:1}.my-course-eyebrow{display:block;color:var(--clinic-primary);font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.my-course-hero .my-course-eyebrow{color:#ffe09b}.my-course-hero h1{margin:.3rem 0 .65rem;color:#fff;font-size:clamp(1.75rem,3vw,2.45rem);font-weight:800;letter-spacing:-.035em}.my-course-hero p{max-width:680px;margin:0;color:rgba(255,255,255,.82);line-height:1.65}.my-course-hero__summary{display:flex;flex:0 0 auto;padding:.9rem;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:1rem;backdrop-filter:blur(8px)}.my-course-hero__summary span{min-width:112px;padding:.2rem 1rem;text-align:center}.my-course-hero__summary span+span{border-left:1px solid rgba(255,255,255,.22)}.my-course-hero__summary strong,.my-course-hero__summary small{display:block}.my-course-hero__summary strong{font-size:1.5rem}.my-course-hero__summary small{margin-top:.15rem;color:rgba(255,255,255,.75);font-size:.68rem}.my-course-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding:0 .15rem}.my-course-heading h2{margin:.2rem 0 0;color:var(--clinic-ink);font-size:1.2rem;font-weight:800}.my-course-completion{color:var(--clinic-muted);font-size:.75rem}.my-course-completion i{margin-right:.3rem;color:var(--clinic-primary)}.my-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}.my-course-card{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:265px;background:#fff;border:1px solid var(--clinic-border);border-radius:1.15rem;box-shadow:0 8px 24px rgba(24,75,70,.06);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.my-course-card:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(24,75,70,.11)}.my-course-card__visual{position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#e6f5f1,#f5f0f8)}.my-course-card__visual::after{content:"";position:absolute;width:115px;height:115px;border:1px solid rgba(8,138,122,.13);border-radius:50%;box-shadow:0 0 0 22px rgba(8,138,122,.035)}.my-course-card__icon{z-index:1;display:flex;width:68px;height:68px;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--clinic-primary),#56b49b);border-radius:1.25rem;font-size:1.55rem;box-shadow:0 10px 25px rgba(8,138,122,.2)}.my-course-card__badge{position:absolute;z-index:1;top:.8rem;left:.8rem;padding:.28rem .55rem;color:#08776b;background:rgba(255,255,255,.88);border-radius:2rem;font-size:.61rem;font-weight:800;text-transform:uppercase}.my-course-card__body{display:flex;min-width:0;flex-direction:column;padding:1.35rem}.my-course-card__meta{display:flex;align-items:center;gap:.45rem;color:var(--clinic-muted);font-size:.67rem;font-weight:700}.my-course-card__meta .fa-circle{font-size:.22rem}.my-course-card h3{margin:.45rem 0 1rem;color:var(--clinic-ink);font-size:1.12rem;font-weight:800;line-height:1.35}.my-course-card__progress-copy{display:flex;justify-content:space-between;margin-top:auto;color:var(--clinic-muted);font-size:.7rem}.my-course-card__progress-copy strong{color:var(--clinic-primary)}.my-course-card .progress{height:.55rem;margin:.5rem 0 .65rem;background:#e3eeec;border-radius:1rem}.my-course-card .progress-bar{background:linear-gradient(90deg,var(--clinic-primary),#52b99b);border-radius:1rem}.my-course-card__activity{color:var(--clinic-muted);font-size:.68rem}.my-course-card__activity i{color:var(--clinic-primary)}.my-course-card__description{margin:auto 0 1rem;color:var(--clinic-muted);font-size:.74rem;line-height:1.6}.my-course-card__action{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding:.65rem .8rem;font-size:.73rem;font-weight:700}.my-course-empty{grid-column:1/-1;padding:4rem 1.5rem;color:var(--clinic-muted);background:#fff;border:1px dashed #bfd5d1;border-radius:1.1rem;text-align:center}.my-course-empty>span{display:flex;width:64px;height:64px;align-items:center;justify-content:center;margin:0 auto 1rem;color:var(--clinic-primary);background:var(--clinic-primary-soft);border-radius:1rem;font-size:1.5rem}.my-course-empty h3{color:var(--clinic-ink);font-size:1.1rem;font-weight:800}.my-course-empty p{max-width:450px;margin:.5rem auto 1.25rem;font-size:.76rem;line-height:1.6}
@media(max-width:991.98px){.my-course-hero{align-items:flex-start;flex-direction:column}.my-course-hero__summary{width:100%}.my-course-hero__summary span{flex:1}.my-course-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){.my-course-hero{min-height:0;margin-bottom:1.35rem;padding:1.5rem 1.2rem;border-radius:1rem}.my-course-hero h1{font-size:1.65rem}.my-course-hero p{font-size:.8rem}.my-course-hero__summary{padding:.7rem}.my-course-hero__summary span{min-width:0;padding:.15rem .5rem}.my-course-heading{align-items:flex-start;flex-direction:column}.my-course-card{grid-template-columns:1fr}.my-course-card__visual{min-height:125px}.my-course-card__icon{width:58px;height:58px;font-size:1.3rem}.my-course-card__body{padding:1.1rem}.my-course-card h3{font-size:1.03rem}.my-course-empty{padding:3rem 1rem}}

/* Penyeragaman akhir palet Pelangi Hati */
.my-course-hero,
.my-course-hero.is-mentor {
    background: linear-gradient(125deg, #163E73, #1F5AA6 68%, #2D6DB8);
    box-shadow: 0 18px 44px rgba(22, 62, 115, .16);
}
.my-course-hero .my-course-eyebrow { color: var(--clinic-yellow); }
.my-course-card__visual { background: linear-gradient(145deg, #EAF2FB, #FAFBFC); }
.my-course-card__visual::after { border-color: rgba(31, 90, 166, .14); box-shadow: 0 0 0 22px rgba(31, 90, 166, .04); }
.my-course-card__icon { background: linear-gradient(135deg, var(--clinic-primary), var(--clinic-primary-dark)); box-shadow: 0 10px 25px rgba(31, 90, 166, .2); }
.my-course-card__badge { color: var(--clinic-primary-dark); }
.my-course-card .progress-bar,
.dashboard-student-course .progress-bar { background: linear-gradient(90deg, var(--clinic-primary), var(--clinic-success)); }