/* ============================================================
   INCEPTION PARTICIPANT V55

   - Sidebar konsisten / sticky desktop
   - 6 menu participant
   - Data Peserta Tim: satu peserta satu row/card
   - Tim 3 / 4 / 5 peserta responsive
   - Static CSS only
   ============================================================ */


/* ============================================================
   SIDEBAR
   ============================================================ */

@media (min-width: 901px) {

    .participant-sidebar {
        position: sticky !important;
        top: 0 !important;

        align-self: start !important;

        height: 100vh !important;
        max-height: 100vh !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;

        display: flex !important;
        flex-direction: column !important;
    }

    .participant-menu-v55 {
        flex:
            1
            1
            auto;

        min-height: 0;
    }

    .participant-sidebar-foot {
        margin-top: auto !important;
        flex-shrink: 0;
    }
}


/* ------------------------------------------------------------
   Six menu items
   ------------------------------------------------------------ */

.participant-menu-v55 button {
    min-height: 54px;
}

.participant-menu-v55 button i {
    margin-left: auto;

    max-width: 72px;

    font-size: 8px !important;
    line-height: 1.2 !important;

    text-align: right;
    white-space: normal;
}

.participant-menu-v55
.participant-menu-future-v55 {
    opacity: .68 !important;

    cursor: default !important;

    filter: none !important;
}

.participant-menu-v55
.participant-menu-future-v55:hover {
    transform: none !important;
}


/* ============================================================
   DATA PESERTA PAGE
   ============================================================ */

.participant-data-team-v55 {
    display: grid;

    gap: 18px;

    width: 100%;
}


/* ------------------------------------------------------------
   Generic card surface
   ------------------------------------------------------------ */

.participant-team-card-v55,
.participant-person-card-v55,
.participant-document-card-v55,
.participant-save-v55 {
    border:
        1px solid
        #dfe6f2;

    background:
        #ffffff;

    box-shadow:
        0 12px 34px
        rgba(33, 51, 89, .055);
}


/* ============================================================
   IDENTITAS TIM
   ============================================================ */

.participant-team-card-v55 {
    display: grid;

    grid-template-columns:
        minmax(210px, .65fr)
        minmax(0, 1.65fr);

    gap: 32px;

    align-items: center;

    padding: 26px;

    border-radius: 22px;
}

.participant-section-head-v55 {
    min-width: 0;
}

.participant-section-kicker-v55 {
    display: block;

    margin-bottom: 7px;

    color: #5974cc;

    font-size: 10px;
    font-weight: 850;

    letter-spacing: .14em;
}

.participant-section-head-v55 h2,
.participant-document-copy-v55 h2 {
    margin:
        0
        0
        7px;

    color: #202b46;

    font-size: 23px !important;
    line-height: 1.2;
}

.participant-section-head-v55 p,
.participant-document-copy-v55 p {
    margin: 0;

    color: #74809a;

    font-size: 13px;
    line-height: 1.65;
}

.participant-team-fields-v55 {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        16px
        18px;
}


/* ============================================================
   PERSON STACK
   ============================================================ */

.participant-person-stack-v55 {
    display: grid;

    gap: 14px;
}

.participant-person-card-v55 {
    display: grid;

    grid-template-columns:
        minmax(180px, .45fr)
        minmax(0, 1.55fr);

    gap: 24px;

    align-items: center;

    padding:
        20px
        22px;

    border-radius: 20px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.participant-person-card-v55:hover {
    border-color:
        rgba(84, 109, 198, .30);

    box-shadow:
        0 14px 36px
        rgba(33, 51, 89, .075);
}


/* Ketua sedikit dibedakan */

.participant-person-card-v55.is-leader {
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcff 64%,
            rgba(219, 106, 98, .035) 100%
        );
}


/* ------------------------------------------------------------
   Person header
   ------------------------------------------------------------ */

.participant-person-head-v55 {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}

.participant-person-head-v55 > b {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex:
        0
        0
        42px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #4964bd,
            #627bd1
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 850;

    box-shadow:
        0 7px 18px
        rgba(70, 94, 186, .16);
}

.participant-person-head-v55 > div {
    display: grid;

    gap: 3px;

    min-width: 0;
}

.participant-person-head-v55 strong {
    color: #202b46;

    font-size: 14px;
    font-weight: 800;
}

.participant-person-head-v55 span {
    color: #8590a7;

    font-size: 10.5px;
    font-weight: 600;
}


/* ------------------------------------------------------------
   Person fields
   ------------------------------------------------------------ */

.participant-person-fields-v55 {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        14px
        16px;
}

.participant-team-fields-v55 label,
.participant-person-fields-v55 label {
    display: grid;

    gap: 7px;

    min-width: 0;

    color: #39445e;

    font-size: 11px;
    font-weight: 750;
}

.participant-team-fields-v55 input,
.participant-person-fields-v55 input {
    width: 100%;

    min-width: 0;
    height: 45px;

    padding:
        0
        13px;

    border:
        1px solid
        #dbe3f1;

    border-radius: 11px;

    outline: 0;

    background: #fbfcff;

    color: #202b46;

    font: inherit;
    font-size: 13px;
    font-weight: 650;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.participant-team-fields-v55 input:focus,
.participant-person-fields-v55 input:focus {
    border-color: #647fd9;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(82, 109, 204, .10);
}


/* ============================================================
   DOCUMENT
   ============================================================ */

.participant-document-card-v55 {
    display: grid;

    grid-template-columns:
        minmax(220px, .65fr)
        minmax(0, 1.35fr);

    gap: 26px;

    align-items: center;

    padding: 24px 26px;

    border-radius: 22px;
}

.participant-document-action-v55 {
    display: grid;

    gap: 11px;

    min-width: 0;
}

.participant-document-action-v55
.participant-file-badge {
    width: 100%;

    min-width: 0;

    overflow-wrap: anywhere;
}

.participant-upload-v55 {
    justify-self: start;
}


/* ============================================================
   SAVE BAR
   ============================================================ */

.participant-save-v55 {
    margin-top: 0 !important;

    padding:
        16px
        18px !important;

    border-radius: 17px !important;
}

.participant-save-v55 > div {
    display: grid;

    gap: 3px;
}

.participant-save-v55 > div strong {
    color: #26324d;

    font-size: 12px;
}

.participant-save-v55 > div span {
    color: #8a95aa;

    font-size: 10px;
    line-height: 1.45;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1180px) {

    .participant-team-card-v55,
    .participant-document-card-v55 {
        grid-template-columns:
            1fr;
    }

    .participant-person-card-v55 {
        grid-template-columns:
            minmax(160px, .45fr)
            minmax(0, 1.55fr);
    }
}


/* ============================================================
   MOBILE / SMALL TABLET
   ============================================================ */

@media (max-width: 900px) {

    .participant-sidebar {
        position: relative !important;

        top: auto !important;

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .participant-data-team-v55 {
        gap: 14px;
    }

    .participant-team-card-v55,
    .participant-person-card-v55,
    .participant-document-card-v55 {
        grid-template-columns:
            1fr;

        gap: 18px;

        padding:
            18px
            16px;

        border-radius: 18px;
    }

    .participant-team-fields-v55,
    .participant-person-fields-v55 {
        grid-template-columns:
            1fr;
    }

    .participant-person-head-v55 {
        padding-bottom: 2px;
    }

    .participant-save-v55 {
        gap: 14px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .participant-person-head-v55 > b {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        border-radius: 11px;
    }

    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {
        height: 44px;
    }

    .participant-save-v55 {
        align-items: stretch !important;
    }

    .participant-save-v55 button {
        width: 100%;
    }
}


/* ============================================================
   INCEPTION_V55A_SIDEBAR_CLEAN

   Desktop:
   - sidebar mengikuti viewport
   - sidebar tidak mempunyai scroll internal
   - menu dibuat lebih compact agar 6 tahap muat
   ============================================================ */

@media (min-width: 901px) {

    .participant-sidebar {
        position:
            sticky !important;

        top:
            0 !important;

        align-self:
            start !important;

        height:
            100vh !important;

        max-height:
            100vh !important;

        box-sizing:
            border-box !important;

        overflow:
            hidden !important;

        overscroll-behavior:
            none !important;

        display:
            flex !important;

        flex-direction:
            column !important;
    }


    /*
     * Jangan pernah munculkan scrollbar sidebar.
     */

    .participant-sidebar::-webkit-scrollbar {
        width:
            0 !important;

        height:
            0 !important;

        display:
            none !important;
    }

    .participant-sidebar {
        scrollbar-width:
            none !important;
    }


    /*
     * User card sedikit dipadatkan supaya seluruh menu,
     * logout dan footer muat dalam satu viewport.
     */

    .participant-user-card {
        flex-shrink:
            0 !important;

        margin-top:
            16px !important;

        margin-bottom:
            12px !important;

        padding-top:
            18px !important;

        padding-bottom:
            18px !important;
    }

    .participant-avatar {
        width:
            58px !important;

        height:
            58px !important;
    }

    .participant-user-card > strong {
        margin-top:
            9px !important;

        font-size:
            16px !important;
    }

    .participant-user-card > span {
        margin-top:
            7px !important;
    }

    .participant-user-card > small {
        margin-top:
            8px !important;
    }


    /*
     * Navigation mengisi ruang tengah,
     * TIDAK boleh scroll sendiri.
     */

    .participant-menu-v55a {
        flex:
            1
            1
            auto !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;

        gap:
            3px !important;
    }

    .participant-menu-v55a
    .participant-menu-label {
        margin-bottom:
            9px !important;
    }

    .participant-menu-v55a button {
        min-height:
            46px !important;

        padding-top:
            7px !important;

        padding-bottom:
            7px !important;

        line-height:
            1.25 !important;
    }


    /*
     * Tidak ada lagi badge/status mini di sisi kanan.
     */

    .participant-menu-v55a button i {
        display:
            none !important;
    }


    /*
     * Future stage tetap terlihat clean.
     * Tidak perlu tulisan "Belum dibuka".
     */

    .participant-menu-v55a
    .participant-menu-future-v55 {
        opacity:
            .72 !important;

        cursor:
            default !important;
    }

    .participant-menu-v55a
    .participant-menu-future-v55:hover {
        transform:
            none !important;
    }


    /*
     * Logout tidak terlalu tinggi.
     */

    .participant-menu-v55a
    .participant-logout-menu {
        min-height:
            48px !important;

        margin-top:
            8px !important;
    }


    /*
     * Footer selalu di dasar viewport.
     */

    .participant-sidebar-foot {
        flex-shrink:
            0 !important;

        margin-top:
            auto !important;

        padding-top:
            11px !important;

        padding-bottom:
            13px !important;
    }
}


/* ============================================================
   SHORT DESKTOP / LAPTOP
   Masih harus muat tanpa scrollbar sidebar.
   ============================================================ */

@media
    (min-width: 901px)
    and (max-height: 760px) {

    .participant-user-card {
        margin-top:
            10px !important;

        margin-bottom:
            7px !important;

        padding-top:
            12px !important;

        padding-bottom:
            12px !important;
    }

    .participant-avatar {
        width:
            48px !important;

        height:
            48px !important;
    }

    .participant-user-card > strong {
        margin-top:
            6px !important;

        font-size:
            14px !important;
    }

    .participant-user-card > span,
    .participant-user-card > small {
        margin-top:
            4px !important;
    }

    .participant-menu-v55a
    .participant-menu-label {
        margin-bottom:
            5px !important;
    }

    .participant-menu-v55a button {
        min-height:
            40px !important;

        padding-top:
            4px !important;

        padding-bottom:
            4px !important;

        font-size:
            13px !important;
    }

    .participant-menu-v55a
    .participant-logout-menu {
        min-height:
            42px !important;

        margin-top:
            4px !important;
    }

    .participant-sidebar-foot {
        padding-top:
            7px !important;

        padding-bottom:
            8px !important;
    }
}


/* ============================================================
   MOBILE
   Tetap mengikuti layout responsive existing.
   ============================================================ */

@media (max-width: 900px) {

    .participant-sidebar {
        position:
            relative !important;

        top:
            auto !important;

        height:
            auto !important;

        max-height:
            none !important;

        overflow:
            visible !important;
    }

    .participant-menu-v55a {
        overflow:
            visible !important;
    }
}



/* ============================================================
   INCEPTION_V55B_SIDEBAR_FINAL

   Desktop:
   - tidak ada scroll internal sidebar
   - sidebar tetap mengikuti viewport
   - 6 menu compact dan bersih
   ============================================================ */

@media (min-width: 901px) {

    .participant-sidebar {
        position: sticky !important;
        top: 0 !important;

        align-self: start !important;

        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;

        overflow: hidden !important;

        overscroll-behavior: none !important;

        scrollbar-width: none !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
    }

    .participant-sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* --------------------------------------------------------
       MENU AREA
       -------------------------------------------------------- */

    .participant-menu-v55,
    .participant-menu-v55a {
        flex: 1 1 auto !important;

        min-height: 0 !important;

        overflow: hidden !important;

        gap: 3px !important;
    }

    .participant-menu-v55a
    .participant-menu-label {
        margin-bottom: 7px !important;
    }


    /* 6 menu harus muat tanpa scrollbar */

    .participant-menu-v55a button {
        min-height: 43px !important;
        height: auto !important;

        padding-top: 7px !important;
        padding-bottom: 7px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        line-height: 1.25 !important;
    }


    /* --------------------------------------------------------
       HAPUS STATUS MINI JELEK
       -------------------------------------------------------- */

    .participant-menu-v55a button i {
        display: none !important;
    }


    /* Menu tahap berikutnya tetap clean */
    .participant-menu-v55a
    .participant-menu-future-v55 {
        opacity: .78 !important;

        cursor: default !important;
    }

    .participant-menu-v55a
    .participant-menu-future-v55:hover {
        transform: none !important;
    }


    /* --------------------------------------------------------
       LOGOUT
       -------------------------------------------------------- */

    .participant-menu-v55a
    .participant-logout-menu {
        min-height: 46px !important;

        margin-top: 7px !important;
    }


    /* --------------------------------------------------------
       FOOTER SELALU DI BAWAH
       -------------------------------------------------------- */

    .participant-sidebar-foot {
        flex-shrink: 0 !important;

        margin-top: auto !important;

        padding-top: 8px !important;
        padding-bottom: 10px !important;
    }
}


/* ============================================================
   LAPTOP PENDEK
   ============================================================ */

@media
    (min-width: 901px)
    and (max-height: 820px) {

    .participant-menu-v55a button {
        min-height: 38px !important;

        padding-top: 4px !important;
        padding-bottom: 4px !important;

        font-size: 12.5px !important;
    }

    .participant-menu-v55a
    .participant-menu-label {
        margin-bottom: 4px !important;
    }

    .participant-menu-v55a
    .participant-logout-menu {
        min-height: 40px !important;

        margin-top: 4px !important;
    }

    .participant-sidebar-foot {
        padding-top: 5px !important;
        padding-bottom: 6px !important;
    }
}


/* ============================================================
   MOBILE
   Sidebar kembali ke behavior responsive normal.
   ============================================================ */

@media (max-width: 900px) {

    .participant-sidebar {
        position: relative !important;

        top: auto !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .participant-menu-v55,
    .participant-menu-v55a {
        overflow: visible !important;
    }
}



/* ============================================================
   INCEPTION_V55C_FIXED_SIDEBAR

   DESKTOP:
   - sidebar benar-benar fixed terhadap viewport
   - tidak ikut naik / hilang saat halaman discroll
   - tidak memiliki scrollbar internal
   - main application diberi ruang selebar sidebar

   Modern Chromium supports :has(), sehingga kita tidak perlu
   mengubah React structure atau menjalankan JS observer.
   ============================================================ */

@media (min-width: 901px) {

    /*
     * Parent langsung yang mempunyai sidebar.
     * Ubah ke block supaya fixed sidebar tidak bentrok
     * dengan grid/flex positioning parent lama.
     */

    *:has(> .participant-sidebar) {
        display: block !important;

        position: relative !important;

        min-height: 100vh !important;

        overflow: visible !important;
    }


    /*
     * TRUE FIXED SIDEBAR
     */

    *:has(> .participant-sidebar)
    > .participant-sidebar {

        position: fixed !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 286px !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        overflow: hidden !important;

        z-index: 1000 !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;

        scrollbar-width: none !important;
    }


    *:has(> .participant-sidebar)
    > .participant-sidebar::-webkit-scrollbar {

        width: 0 !important;
        height: 0 !important;

        display: none !important;
    }


    /*
     * Main application otomatis pindah ke kanan.
     *
     * Tidak perlu tahu nama class main wrapper.
     * Kita target sibling langsung setelah sidebar.
     */

    *:has(> .participant-sidebar)
    > .participant-sidebar
    + * {

        width:
            calc(100% - 286px) !important;

        max-width:
            calc(100% - 286px) !important;

        min-width: 0 !important;

        margin-left:
            286px !important;

        box-sizing:
            border-box !important;
    }


    /*
     * Sidebar menu selalu ada dalam satu viewport.
     */

    .participant-menu-v55,
    .participant-menu-v55a {

        flex:
            1
            1
            auto !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;
    }


    .participant-sidebar-foot {

        margin-top:
            auto !important;

        flex-shrink:
            0 !important;
    }

}



/* ============================================================
   V55C DATA PESERTA COMPACT DESKTOP

   Tujuan:
   3 / 4 / 5 peserta tetap nyaman dan halaman tidak memanjang
   berlebihan.
   ============================================================ */

@media (min-width: 1100px) {

    .participant-data-team-v55 {

        gap:
            9px !important;
    }


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

    .participant-team-card-v55 {

        grid-template-columns:
            minmax(190px, .52fr)
            minmax(0, 1.48fr) !important;

        gap:
            20px !important;

        padding:
            15px
            18px !important;

        border-radius:
            16px !important;
    }


    .participant-section-kicker-v55 {

        margin-bottom:
            4px !important;

        font-size:
            9px !important;
    }


    .participant-section-head-v55 h2,
    .participant-document-copy-v55 h2 {

        margin-bottom:
            4px !important;

        font-size:
            19px !important;
    }


    .participant-section-head-v55 p,
    .participant-document-copy-v55 p {

        font-size:
            11px !important;

        line-height:
            1.45 !important;
    }


    .participant-team-fields-v55 {

        gap:
            8px
            12px !important;
    }



    /* --------------------------------------------------------
       PERSON ROWS
       -------------------------------------------------------- */

    .participant-person-stack-v55 {

        gap:
            8px !important;
    }


    .participant-person-card-v55 {

        grid-template-columns:
            minmax(190px, .43fr)
            minmax(0, 1.57fr) !important;

        gap:
            18px !important;

        padding:
            10px
            16px !important;

        border-radius:
            16px !important;
    }


    .participant-person-head-v55 {

        gap:
            10px !important;
    }


    .participant-person-head-v55 > b {

        width:
            36px !important;

        height:
            36px !important;

        flex-basis:
            36px !important;

        border-radius:
            10px !important;

        font-size:
            11px !important;
    }


    .participant-person-head-v55 strong {

        font-size:
            12.5px !important;
    }


    .participant-person-head-v55 span {

        font-size:
            9.5px !important;
    }


    .participant-person-fields-v55 {

        gap:
            7px
            12px !important;
    }


    .participant-team-fields-v55 label,
    .participant-person-fields-v55 label {

        gap:
            4px !important;

        font-size:
            10px !important;
    }


    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {

        height:
            37px !important;

        padding:
            0
            11px !important;

        border-radius:
            9px !important;

        font-size:
            12px !important;
    }



    /* --------------------------------------------------------
       DOCUMENT
       -------------------------------------------------------- */

    .participant-document-card-v55 {

        grid-template-columns:
            minmax(190px, .58fr)
            minmax(0, 1.42fr) !important;

        gap:
            18px !important;

        padding:
            13px
            18px !important;

        border-radius:
            16px !important;
    }


    .participant-document-action-v55 {

        gap:
            6px !important;
    }


    .participant-upload-v55 {

        min-height:
            34px !important;

        padding-top:
            7px !important;

        padding-bottom:
            7px !important;
    }



    /* --------------------------------------------------------
       SAVE
       -------------------------------------------------------- */

    .participant-save-v55 {

        padding:
            10px
            14px !important;

        border-radius:
            14px !important;
    }


    .participant-save-v55 > div {

        gap:
            1px !important;
    }


    .participant-save-v55 > div strong {

        font-size:
            10.5px !important;
    }


    .participant-save-v55 > div span {

        font-size:
            8.5px !important;
    }


    .participant-save-v55 button {

        min-height:
            36px !important;

        padding-top:
            7px !important;

        padding-bottom:
            7px !important;
    }

}



/* ============================================================
   SHORT DESKTOP / LAPTOP

   Lebih compact lagi pada tinggi layar <= 900px.
   ============================================================ */

@media
    (min-width: 1100px)
    and (max-height: 900px) {

    .participant-data-team-v55 {

        gap:
            7px !important;
    }


    .participant-team-card-v55 {

        padding:
            11px
            16px !important;
    }


    .participant-person-stack-v55 {

        gap:
            6px !important;
    }


    .participant-person-card-v55 {

        padding:
            8px
            14px !important;
    }


    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {

        height:
            34px !important;
    }


    .participant-document-card-v55 {

        padding:
            10px
            16px !important;
    }


    .participant-save-v55 {

        padding:
            8px
            12px !important;
    }

}



/* ============================================================
   EXTRA SHORT DESKTOP
   Untuk 768px-ish viewport.
   ============================================================ */

@media
    (min-width: 1100px)
    and (max-height: 780px) {

    .participant-section-head-v55 p,
    .participant-document-copy-v55 p {

        line-height:
            1.3 !important;
    }


    .participant-team-card-v55 {

        padding:
            8px
            14px !important;
    }


    .participant-person-card-v55 {

        padding:
            6px
            12px !important;
    }


    .participant-person-head-v55 > b {

        width:
            32px !important;

        height:
            32px !important;

        flex-basis:
            32px !important;
    }


    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {

        height:
            31px !important;
    }


    .participant-document-card-v55 {

        padding:
            8px
            14px !important;
    }


    .participant-save-v55 {

        padding:
            6px
            10px !important;
    }

}



/* ============================================================
   MOBILE / TABLET

   Fixed desktop sidebar tidak boleh bocor ke mobile.
   ============================================================ */

@media (max-width: 900px) {

    *:has(> .participant-sidebar) {

        display:
            revert !important;

        min-height:
            0 !important;
    }


    *:has(> .participant-sidebar)
    > .participant-sidebar {

        position:
            relative !important;

        top:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            auto !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        overflow:
            visible !important;
    }


    *:has(> .participant-sidebar)
    > .participant-sidebar
    + * {

        width:
            auto !important;

        max-width:
            none !important;

        margin-left:
            0 !important;
    }

}



/* ============================================================
   INCEPTION_V56_COMFORTABLE_LAYOUT

   V55C fixed sidebar tetap dipertahankan.
   V56 hanya mengoreksi Data Peserta yang terlalu kecil.
   ============================================================ */


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1100px) {

    .participant-content {
        padding-top:
            24px !important;

        padding-bottom:
            24px !important;
    }


    .participant-data-team-v55 {
        gap:
            11px !important;
    }


    /* --------------------------------------------------------
       IDENTITAS + DOKUMEN DALAM SATU CARD
       -------------------------------------------------------- */

    .participant-team-card-v55 {

        display:
            grid !important;

        grid-template-columns:
            minmax(220px, .55fr)
            minmax(360px, 1.05fr)
            minmax(280px, .85fr)
            !important;

        gap:
            20px !important;

        align-items:
            center !important;

        padding:
            18px
            20px !important;

        border-radius:
            18px !important;
    }


    .participant-section-kicker-v55 {

        margin-bottom:
            5px !important;

        font-size:
            9.5px !important;
    }


    .participant-section-head-v55 h2 {

        margin-bottom:
            6px !important;

        font-size:
            21px !important;
    }


    .participant-section-head-v55 p {

        font-size:
            12px !important;

        line-height:
            1.45 !important;
    }


    .participant-team-fields-v55 {

        gap:
            10px
            13px !important;
    }


    /* --------------------------------------------------------
       MERGED DOCUMENT
       -------------------------------------------------------- */

    .participant-team-document-v56 {

        min-width:
            0;

        padding-left:
            18px;

        border-left:
            1px solid #e2e8f3;

        display:
            grid;

        gap:
            9px;
    }


    .participant-team-document-copy-v56 {

        display:
            grid;

        gap:
            3px;
    }


    .participant-team-document-copy-v56 strong {

        color:
            #202b46;

        font-size:
            14px;

        font-weight:
            800;
    }


    .participant-team-document-copy-v56 small {

        color:
            #7d889f;

        font-size:
            9.5px;

        line-height:
            1.4;
    }


    .participant-team-document-action-v56 {

        display:
            grid;

        gap:
            7px;

        min-width:
            0;
    }


    .participant-team-document-action-v56
    .participant-file-badge {

        width:
            100%;

        min-width:
            0;

        overflow-wrap:
            anywhere;
    }


    .participant-upload-v56 {

        justify-self:
            start;

        min-height:
            36px !important;

        padding:
            8px
            13px !important;

        font-size:
            10px !important;
    }


    /* --------------------------------------------------------
       PERSON CARDS
       -------------------------------------------------------- */

    .participant-person-stack-v55 {

        gap:
            9px !important;
    }


    .participant-person-card-v55 {

        grid-template-columns:
            minmax(220px, .46fr)
            minmax(0, 1.54fr)
            !important;

        gap:
            20px !important;

        padding:
            13px
            18px !important;

        border-radius:
            17px !important;
    }


    .participant-person-card-v55.is-leader {

        padding-top:
            15px !important;

        padding-bottom:
            15px !important;
    }


    .participant-person-head-v55 {

        gap:
            12px !important;
    }


    .participant-person-head-v55 > b {

        width:
            40px !important;

        height:
            40px !important;

        flex-basis:
            40px !important;

        border-radius:
            11px !important;

        font-size:
            12px !important;
    }


    .participant-person-head-v55 strong {

        font-size:
            13.5px !important;
    }


    .participant-person-head-v55 span {

        font-size:
            10px !important;
    }


    .participant-person-fields-v55 {

        gap:
            9px
            14px !important;
    }


    /* --------------------------------------------------------
       LABELS / INPUTS
       -------------------------------------------------------- */

    .participant-team-fields-v55 label,
    .participant-person-fields-v55 label {

        gap:
            5px !important;

        font-size:
            10.5px !important;
    }


    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {

        height:
            41px !important;

        padding:
            0
            12px !important;

        border-radius:
            10px !important;

        font-size:
            12.5px !important;
    }


    /* --------------------------------------------------------
       OLD DOCUMENT IS GONE
       Defensive only.
       -------------------------------------------------------- */

    .participant-document-card-v55 {

        display:
            none !important;
    }


    /* --------------------------------------------------------
       SAVE BAR
       -------------------------------------------------------- */

    .participant-save-v55 {

        min-height:
            52px !important;

        padding:
            10px
            14px !important;

        border-radius:
            15px !important;
    }


    .participant-save-v55 > div {

        gap:
            2px !important;
    }


    .participant-save-v55 > div strong {

        font-size:
            11px !important;
    }


    .participant-save-v55 > div span {

        font-size:
            9px !important;
    }


    .participant-save-v55 button {

        min-height:
            38px !important;

        padding:
            8px
            16px !important;
    }

}


/* ============================================================
   LAPTOP HEIGHT
   Tetap compact, TAPI tidak sekecil V55C.
   ============================================================ */

@media
    (min-width: 1100px)
    and (max-height: 820px) {

    .participant-content {

        padding-top:
            18px !important;

        padding-bottom:
            18px !important;
    }


    .participant-data-team-v55 {

        gap:
            8px !important;
    }


    .participant-team-card-v55 {

        padding:
            14px
            18px !important;
    }


    .participant-person-stack-v55 {

        gap:
            7px !important;
    }


    .participant-person-card-v55 {

        padding:
            10px
            16px !important;
    }


    .participant-person-card-v55.is-leader {

        padding-top:
            11px !important;

        padding-bottom:
            11px !important;
    }


    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {

        /*
         * V55C pernah 31px.
         * Jangan sekecil itu lagi.
         */

        height:
            39px !important;
    }


    .participant-person-head-v55 > b {

        width:
            38px !important;

        height:
            38px !important;

        flex-basis:
            38px !important;
    }


    .participant-save-v55 {

        min-height:
            48px !important;

        padding:
            8px
            12px !important;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media
    (min-width: 901px)
    and (max-width: 1250px) {

    .participant-team-card-v55 {

        grid-template-columns:
            minmax(200px, .6fr)
            minmax(0, 1.4fr)
            !important;
    }


    .participant-team-document-v56 {

        grid-column:
            1 / -1;

        padding-left:
            0;

        padding-top:
            13px;

        border-left:
            0;

        border-top:
            1px solid #e2e8f3;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .participant-team-card-v55 {

        grid-template-columns:
            1fr !important;

        gap:
            17px !important;

        padding:
            18px
            16px !important;
    }


    .participant-team-document-v56 {

        padding-left:
            0;

        padding-top:
            15px;

        border-left:
            0;

        border-top:
            1px solid #e2e8f3;
    }


    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {

        height:
            44px !important;

        font-size:
            13px !important;
    }


    .participant-person-card-v55 {

        padding:
            17px
            16px !important;
    }

}



/* ============================================================
   INCEPTION_V57_FINAL_PROFILE_UI

   - Profile Tim lebih natural
   - Foto ketua / logo sekolah
   - Kartu Pelajar menjadi attachment row
   - Person cards nyaman dibaca
   - Sidebar fixed V55C tidak disentuh
   ============================================================ */


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1100px) {

    .participant-data-team-v55 {
        gap:
            12px !important;
    }


    /* --------------------------------------------------------
       PROFILE TEAM CARD
       -------------------------------------------------------- */

    .participant-team-card-v55 {

        grid-template-columns:
            minmax(310px, .75fr)
            minmax(0, 1.55fr)
            !important;

        gap:
            22px !important;

        padding:
            21px
            22px !important;

        border-radius:
            20px !important;
    }


    /*
     * Foto/logo berada di sisi kiri bersama identitas.
     */

    .participant-section-head-v55 {

        display:
            grid !important;

        grid-template-columns:
            76px
            minmax(0, 1fr);

        column-gap:
            15px;

        align-items:
            center;
    }


    .participant-profile-photo-v57 {

        grid-column:
            1;

        grid-row:
            1 / span 4;

        width:
            76px;

        display:
            grid;

        justify-items:
            center;

        gap:
            7px;
    }


    .participant-profile-photo-v57 > img,
    .participant-profile-photo-v57 > span {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            68px;

        height:
            68px;

        border:
            2px solid
            rgba(
                98,
                125,
                215,
                .24
            );

        border-radius:
            18px;

        box-sizing:
            border-box;

        background:
            linear-gradient(
                135deg,
                #eef3ff,
                #fff3ef
            );

        box-shadow:
            0 8px 20px
            rgba(
                36,
                54,
                96,
                .10
            );
    }


    .participant-profile-photo-v57 > img {

        object-fit:
            contain;

        padding:
            4px;

        background:
            #ffffff;
    }


    .participant-profile-photo-v57 > span {

        color:
            #4964bd;

        font-size:
            19px;

        font-weight:
            800;
    }


    .participant-profile-photo-action-v57 {

        position:
            relative;

        cursor:
            pointer;

        color:
            #536bc2;

        font-size:
            8.5px;

        font-weight:
            750;

        line-height:
            1.25;

        text-align:
            center;
    }


    .participant-profile-photo-action-v57:hover {

        color:
            #d06761;
    }


    .participant-profile-photo-action-v57 input {

        position:
            absolute;

        width:
            1px;

        height:
            1px;

        opacity:
            0;

        pointer-events:
            none;
    }


    .participant-section-head-v55
    > .participant-section-kicker-v55,
    .participant-section-head-v55
    > h2,
    .participant-section-head-v55
    > p {

        grid-column:
            2;
    }


    .participant-section-head-v55
    > .participant-section-kicker-v55 {

        align-self:
            end;
    }


    .participant-section-head-v55 h2 {

        margin:
            3px
            0
            5px !important;

        font-size:
            22px !important;
    }


    .participant-section-head-v55 p {

        max-width:
            250px;

        font-size:
            11.5px !important;

        line-height:
            1.45 !important;
    }


    /* --------------------------------------------------------
       TEAM FIELDS
       -------------------------------------------------------- */

    .participant-team-fields-v55 {

        gap:
            12px
            14px !important;
    }


    .participant-team-fields-v55 input {

        height:
            44px !important;

        font-size:
            13px !important;
    }


    /* --------------------------------------------------------
       KARTU PELAJAR = ATTACHMENT ROW BAWAH
       -------------------------------------------------------- */

    .participant-team-document-v56 {

        grid-column:
            1 / -1 !important;

        display:
            grid !important;

        grid-template-columns:
            130px
            minmax(0, 1fr);

        gap:
            16px !important;

        align-items:
            center;

        margin-top:
            2px;

        padding:
            14px
            0
            0 !important;

        border-left:
            0 !important;

        border-top:
            1px solid
            #e4e9f3 !important;
    }


    .participant-team-document-copy-v56 {

        display:
            block !important;
    }


    .participant-team-document-copy-v56
    .participant-section-kicker-v55 {

        margin:
            0 !important;
    }


    /*
     * Tidak perlu "Dokumen Tim" + deskripsi panjang.
     * Label KARTU PELAJAR sudah cukup.
     */

    .participant-team-document-copy-v56
    > strong,
    .participant-team-document-copy-v56
    > small {

        display:
            none !important;
    }


    .participant-team-document-action-v56 {

        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            10px !important;

        align-items:
            center;
    }


    .participant-team-document-action-v56
    .participant-file-badge {

        margin:
            0 !important;

        min-height:
            42px !important;

        box-sizing:
            border-box;
    }


    .participant-upload-v56 {

        justify-self:
            end !important;

        min-height:
            40px !important;

        padding:
            9px
            15px !important;

        margin:
            0 !important;

        white-space:
            nowrap;
    }


    /* --------------------------------------------------------
       PERSON ROWS
       -------------------------------------------------------- */

    .participant-person-stack-v55 {

        gap:
            10px !important;
    }


    .participant-person-card-v55 {

        grid-template-columns:
            minmax(240px, .47fr)
            minmax(0, 1.53fr)
            !important;

        gap:
            22px !important;

        padding:
            16px
            20px !important;

        border-radius:
            18px !important;
    }


    .participant-person-card-v55.is-leader {

        padding-top:
            18px !important;

        padding-bottom:
            18px !important;
    }


    .participant-person-head-v55 > b {

        width:
            42px !important;

        height:
            42px !important;

        flex-basis:
            42px !important;

        font-size:
            12px !important;
    }


    .participant-person-head-v55 strong {

        font-size:
            14px !important;
    }


    .participant-person-head-v55 span {

        font-size:
            10px !important;
    }


    /*
     * "Data peserta tim" di setiap anggota tidak perlu.
     * Ketua tetap punya "Kontak utama tim".
     */

    .participant-person-card-v55:not(.is-leader)
    .participant-person-head-v55 span {

        display:
            none !important;
    }


    .participant-person-fields-v55 {

        gap:
            11px
            15px !important;
    }


    .participant-person-fields-v55 label {

        gap:
            6px !important;

        font-size:
            11px !important;
    }


    .participant-person-fields-v55 input {

        height:
            44px !important;

        padding:
            0
            13px !important;

        font-size:
            13px !important;

        border-radius:
            10px !important;
    }


    /* --------------------------------------------------------
       SAVE BAR
       -------------------------------------------------------- */

    .participant-save-v55 {

        min-height:
            58px !important;

        padding:
            11px
            15px !important;

        border-radius:
            16px !important;
    }


    .participant-save-v55
    > div
    > strong {

        display:
            none !important;
    }


    .participant-save-v55
    > div
    > span {

        color:
            #69758e !important;

        font-size:
            10.5px !important;

        font-weight:
            600;
    }


    .participant-save-v55 button {

        min-height:
            40px !important;

        padding:
            9px
            17px !important;
    }

}


/* ============================================================
   SIDEBAR REAL IMAGE
   ============================================================ */

.participant-avatar-image-v57 {

    overflow:
        hidden !important;

    padding:
        3px !important;

    background:
        rgba(
            255,
            255,
            255,
            .15
        ) !important;
}


.participant-avatar-image-v57 img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    box-sizing:
        border-box;

    border-radius:
        inherit;

    object-fit:
        contain;

    background:
        #ffffff;
}


/* ============================================================
   MEDIUM DESKTOP / TABLET
   ============================================================ */

@media
    (min-width: 901px)
    and (max-width: 1250px) {

    .participant-team-card-v55 {

        grid-template-columns:
            1fr !important;
    }


    .participant-section-head-v55 p {

        max-width:
            none;
    }


    .participant-team-document-v56 {

        grid-column:
            1 !important;
    }

}


/* ============================================================
   SHORT LAPTOP
   Jangan dikecilkan lagi seperti V55C.
   ============================================================ */

@media
    (min-width: 1100px)
    and (max-height: 820px) {

    .participant-data-team-v55 {

        gap:
            8px !important;
    }


    .participant-team-card-v55 {

        padding:
            16px
            18px !important;
    }


    .participant-team-fields-v55 input,
    .participant-person-fields-v55 input {

        height:
            42px !important;
    }


    .participant-person-card-v55 {

        padding:
            12px
            18px !important;
    }


    .participant-person-card-v55.is-leader {

        padding-top:
            13px !important;

        padding-bottom:
            13px !important;
    }


    .participant-person-stack-v55 {

        gap:
            7px !important;
    }


    .participant-save-v55 {

        min-height:
            52px !important;

        padding:
            8px
            12px !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .participant-section-head-v55 {

        display:
            grid !important;

        grid-template-columns:
            70px
            minmax(0, 1fr);

        column-gap:
            14px;

        align-items:
            center;
    }


    .participant-profile-photo-v57 {

        grid-column:
            1;

        grid-row:
            1 / span 4;

        width:
            70px;

        display:
            grid;

        justify-items:
            center;

        gap:
            6px;
    }


    .participant-profile-photo-v57 > img,
    .participant-profile-photo-v57 > span {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            62px;

        height:
            62px;

        border-radius:
            16px;

        border:
            2px solid
            rgba(98,125,215,.20);

        background:
            #ffffff;
    }


    .participant-profile-photo-v57 > img {

        object-fit:
            contain;

        padding:
            3px;

        box-sizing:
            border-box;
    }


    .participant-profile-photo-v57 > span {

        color:
            #536bc2;

        font-size:
            17px;

        font-weight:
            800;
    }


    .participant-profile-photo-action-v57 {

        position:
            relative;

        cursor:
            pointer;

        color:
            #536bc2;

        font-size:
            8px;

        font-weight:
            750;

        text-align:
            center;
    }


    .participant-profile-photo-action-v57 input {

        position:
            absolute;

        width:
            1px;

        height:
            1px;

        opacity:
            0;
    }


    .participant-section-head-v55
    > .participant-section-kicker-v55,
    .participant-section-head-v55
    > h2,
    .participant-section-head-v55
    > p {

        grid-column:
            2;
    }


    .participant-team-document-v56 {

        grid-column:
            1 / -1 !important;

        grid-template-columns:
            1fr !important;

        gap:
            8px !important;

        padding-top:
            14px !important;

        border-left:
            0 !important;

        border-top:
            1px solid #e4e9f3 !important;
    }


    .participant-team-document-action-v56 {

        grid-template-columns:
            1fr !important;
    }


    .participant-upload-v56 {

        justify-self:
            start !important;
    }


    .participant-person-card-v55 {

        padding:
            17px
            16px !important;
    }


    .participant-person-fields-v55 input,
    .participant-team-fields-v55 input {

        height:
            44px !important;
    }

}



/* ============================================================
   INCEPTION_V59_SINGLE_TEAM_CARD

   Konsep:
   - SATU white card besar ala form kompetisi
   - Profil Tim di bagian atas
   - Ketua full-width
   - Anggota adaptif:
       2 anggota = 2 kolom
       3 anggota = 3 kolom
       4 anggota = 2 x 2
   - Kartu Pelajar tetap di Profil Tim
   - Save menjadi footer card
   - Sidebar V55C tidak disentuh
   ============================================================ */


/* ============================================================
   OUTER WHITE CONTAINER
   ============================================================ */

@media (min-width: 901px) {

    .participant-data-team-v55 {

        display:
            grid !important;

        gap:
            0 !important;

        width:
            100% !important;

        overflow:
            hidden !important;

        border:
            1px solid
            #dfe5ef !important;

        border-radius:
            24px !important;

        background:
            #ffffff !important;

        box-shadow:
            0 16px 42px
            rgba(
                31,
                49,
                88,
                .075
            ) !important;
    }


    /*
     * Semua section lama bukan lagi card besar terpisah.
     * Mereka menjadi SECTION di dalam satu container.
     */

    .participant-data-team-v55
    > .participant-team-card-v55,

    .participant-data-team-v55
    > .participant-person-stack-v55,

    .participant-data-team-v55
    > .participant-member-control-v58,

    .participant-data-team-v55
    > .participant-save-v55 {

        margin:
            0 !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }

}


/* ============================================================
   PROFIL TIM
   ============================================================ */

@media (min-width: 1100px) {

    .participant-team-card-v55 {

        display:
            grid !important;

        grid-template-columns:
            minmax(350px, .85fr)
            minmax(0, 1.5fr)
            !important;

        gap:
            24px !important;

        align-items:
            center !important;

        padding:
            24px
            26px !important;

        border-bottom:
            1px solid
            #e5eaf2 !important;
    }


    /* --------------------------------------------------------
       Profile visual
       -------------------------------------------------------- */

    .participant-section-head-v55 {

        display:
            grid !important;

        grid-template-columns:
            88px
            minmax(0, 1fr)
            !important;

        column-gap:
            17px !important;

        align-items:
            center !important;

        min-width:
            0;
    }


    .participant-profile-photo-v57 {

        grid-column:
            1 !important;

        grid-row:
            1 / span 4 !important;

        width:
            88px !important;

        display:
            grid !important;

        justify-items:
            center !important;

        gap:
            8px !important;
    }


    .participant-profile-photo-v57
    > img,

    .participant-profile-photo-v57
    > span {

        width:
            76px !important;

        height:
            76px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        box-sizing:
            border-box !important;

        border:
            2px solid
            rgba(
                82,
                108,
                198,
                .22
            ) !important;

        border-radius:
            18px !important;

        background:
            linear-gradient(
                135deg,
                #edf2ff,
                #fff3ef
            ) !important;

        color:
            #5068c0 !important;

        font-size:
            20px !important;

        font-weight:
            850 !important;

        box-shadow:
            0 8px 20px
            rgba(
                45,
                65,
                113,
                .09
            ) !important;
    }


    .participant-profile-photo-v57
    > img {

        object-fit:
            contain !important;

        padding:
            5px !important;

        background:
            #ffffff !important;
    }


    /*
     * Ini harus terasa seperti BUTTON,
     * bukan caption kecil.
     */

    .participant-profile-photo-action-v57 {

        position:
            relative !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        min-height:
            28px !important;

        padding:
            5px
            9px !important;

        border:
            1px solid
            rgba(
                82,
                108,
                198,
                .27
            ) !important;

        border-radius:
            8px !important;

        cursor:
            pointer !important;

        background:
            #ffffff !important;

        color:
            #5068c0 !important;

        font-size:
            8.5px !important;

        font-weight:
            800 !important;

        line-height:
            1 !important;

        text-align:
            center !important;

        white-space:
            nowrap !important;

        transition:
            border-color .16s ease,
            background .16s ease,
            color .16s ease !important;
    }


    .participant-profile-photo-action-v57:hover {

        border-color:
            #5b74cd !important;

        background:
            #f3f6ff !important;

        color:
            #4059b2 !important;
    }


    .participant-profile-photo-action-v57
    input {

        position:
            absolute !important;

        width:
            1px !important;

        height:
            1px !important;

        opacity:
            0 !important;

        pointer-events:
            none !important;
    }


    .participant-section-head-v55
    > .participant-section-kicker-v55,

    .participant-section-head-v55
    > h2,

    .participant-section-head-v55
    > p {

        grid-column:
            2 !important;
    }


    .participant-section-head-v55 h2 {

        margin:
            3px
            0
            6px !important;

        font-size:
            23px !important;
    }


    .participant-section-head-v55 p {

        max-width:
            270px !important;

        margin:
            0 !important;

        color:
            #77839a !important;

        font-size:
            11.5px !important;

        line-height:
            1.45 !important;
    }


    /* --------------------------------------------------------
       Nama Tim / Sekolah
       -------------------------------------------------------- */

    .participant-team-fields-v55 {

        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            14px !important;
    }


    .participant-team-fields-v55 label {

        gap:
            6px !important;

        font-size:
            10.5px !important;
    }


    .participant-team-fields-v55 input {

        height:
            45px !important;

        padding:
            0
            13px !important;

        border-radius:
            10px !important;

        font-size:
            13px !important;
    }


    /* --------------------------------------------------------
       Kartu Pelajar sebagai attachment row
       -------------------------------------------------------- */

    .participant-team-document-v56 {

        grid-column:
            1 / -1 !important;

        display:
            grid !important;

        grid-template-columns:
            140px
            minmax(0, 1fr)
            auto !important;

        gap:
            14px !important;

        align-items:
            center !important;

        margin:
            2px
            0
            0 !important;

        padding:
            16px
            0
            0 !important;

        border-left:
            0 !important;

        border-top:
            1px solid
            #e5eaf2 !important;
    }


    .participant-team-document-copy-v56 {

        display:
            block !important;
    }


    .participant-team-document-copy-v56
    > strong,

    .participant-team-document-copy-v56
    > small {

        display:
            none !important;
    }


    .participant-team-document-copy-v56
    .participant-section-kicker-v55 {

        margin:
            0 !important;
    }


    .participant-team-document-action-v56 {

        grid-column:
            2 / 4 !important;

        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        gap:
            10px !important;

        align-items:
            center !important;
    }


    .participant-team-document-action-v56
    .participant-file-badge {

        width:
            100% !important;

        min-height:
            44px !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;
    }


    .participant-upload-v56 {

        justify-self:
            end !important;

        min-height:
            40px !important;

        padding:
            9px
            15px !important;

        margin:
            0 !important;

        white-space:
            nowrap !important;
    }

}


/* ============================================================
   PESERTA SECTION
   ============================================================ */

@media (min-width: 1100px) {

    .participant-person-stack-v55 {

        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            16px !important;

        padding:
            26px !important;

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

        background:
            #ffffff !important;
    }


    /*
     * KETUA selalu full width.
     */

    .participant-person-stack-v55
    > article:first-of-type {

        grid-column:
            1 / -1 !important;
    }


    /*
     * ========================================================
     * TOTAL TIM = 4 ORANG
     *
     * DOM:
     * article 1 = Ketua
     * article 2 = Anggota 1
     * article 3 = Anggota 2
     * article 4 = Anggota 3
     *
     * Maka 3 anggota dibuat 3 kolom.
     * ========================================================
     */

    .participant-person-stack-v55:
    has(> article:nth-of-type(4)):
    not(:has(> article:nth-of-type(5))) {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }


    /*
     * ========================================================
     * TOTAL TIM = 5 ORANG
     *
     * Ketua full
     * anggota 1/2
     * anggota 3/4
     *
     * 2 x 2
     * ========================================================
     */

    .participant-person-stack-v55:
    has(> article:nth-of-type(5)) {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    /*
     * Nested cards ala GEMASTIK,
     * tapi visual tetap INCEPTION.
     */

    .participant-person-card-v55 {

        margin:
            0 !important;

        border:
            1px solid
            #e0e6ef !important;

        border-radius:
            17px !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }


    /*
     * Ketua lebih besar.
     */

    .participant-person-card-v55.is-leader {

        display:
            grid !important;

        grid-template-columns:
            minmax(220px, .4fr)
            minmax(0, 1.6fr)
            !important;

        gap:
            22px !important;

        align-items:
            center !important;

        padding:
            20px !important;

        background:
            linear-gradient(
                135deg,
                #ffffff 0%,
                #fbfcff 70%,
                rgba(
                    214,
                    105,
                    99,
                    .025
                ) 100%
            ) !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-fields-v55 {

        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            12px
            15px !important;
    }


    /*
     * Anggota = compact vertical card.
     */

    .participant-person-card-v55:not(.is-leader) {

        display:
            block !important;

        min-width:
            0 !important;

        padding:
            18px !important;
    }


    .participant-person-card-v55:not(.is-leader)
    .participant-person-head-v55 {

        margin-bottom:
            16px !important;

        padding-bottom:
            12px !important;

        border-bottom:
            1px solid
            #edf0f5 !important;
    }


    .participant-person-card-v55:not(.is-leader)
    .participant-person-fields-v55 {

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    .participant-person-head-v55 {

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            11px !important;
    }


    .participant-person-head-v55 > b {

        width:
            39px !important;

        height:
            39px !important;

        flex:
            0
            0
            39px !important;

        border-radius:
            11px !important;

        font-size:
            11px !important;
    }


    .participant-person-head-v55 strong {

        color:
            #25314a !important;

        font-size:
            13.5px !important;

        font-weight:
            800 !important;
    }


    /*
     * Anggota tidak perlu subtitle repetitif.
     */

    .participant-person-card-v55:not(.is-leader)
    .participant-person-head-v55 span {

        display:
            none !important;
    }


    .participant-person-fields-v55 label {

        gap:
            6px !important;

        font-size:
            10.5px !important;
    }


    .participant-person-fields-v55 input {

        height:
            43px !important;

        padding:
            0
            12px !important;

        border-radius:
            10px !important;

        font-size:
            12.5px !important;
    }

}


/* ============================================================
   DYNAMIC MEMBER CONTROL V58
   ============================================================ */

@media (min-width: 901px) {

    .participant-member-control-v58 {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            18px !important;

        min-height:
            68px !important;

        padding:
            12px
            24px !important;

        border:
            0 !important;

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

        border-radius:
            0 !important;

        background:
            #fbfcff !important;
    }


    .participant-member-control-copy-v58 {

        display:
            grid !important;

        gap:
            2px !important;

        text-align:
            left !important;
    }


    .participant-member-control-copy-v58 strong {

        font-size:
            10.5px !important;
    }


    .participant-member-control-copy-v58 span {

        max-width:
            420px !important;

        font-size:
            9px !important;
    }


    .participant-add-member-v58 {

        min-height:
            38px !important;

        padding:
            8px
            15px !important;

        border:
            1px solid
            #5871ca !important;

        border-radius:
            10px !important;

        background:
            #ffffff !important;

        color:
            #4e66bd !important;

        box-shadow:
            none !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;
    }


    .participant-add-member-v58:hover {

        transform:
            none !important;

        background:
            #f3f6ff !important;

        box-shadow:
            none !important;
    }


    /*
     * Hapus optional member kecil saja.
     */

    .participant-person-remove-v58 {

        margin-left:
            auto !important;

        min-height:
            27px !important;

        padding:
            5px
            8px !important;

        border-radius:
            8px !important;

        font-size:
            8.5px !important;
    }

}


/* ============================================================
   SAVE FOOTER
   ============================================================ */

@media (min-width: 901px) {

    .participant-save-v55 {

        min-height:
            67px !important;

        margin:
            0 !important;

        padding:
            13px
            18px !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }


    .participant-save-v55
    > div
    > strong {

        display:
            none !important;
    }


    .participant-save-v55
    > div
    > span {

        color:
            #728097 !important;

        font-size:
            10px !important;

        font-weight:
            600 !important;
    }


    .participant-save-v55 button {

        min-height:
            40px !important;

        padding:
            9px
            17px !important;
    }

}


/* ============================================================
   MEDIUM DESKTOP

   Jangan paksa 3 kolom jika viewport mulai sempit.
   ============================================================ */

@media
    (min-width: 901px)
    and (max-width: 1280px) {

    .participant-person-stack-v55,
    .participant-person-stack-v55:
    has(> article:nth-of-type(4)):
    not(:has(> article:nth-of-type(5))),
    .participant-person-stack-v55:
    has(> article:nth-of-type(5)) {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .participant-person-stack-v55
    > article:first-of-type {

        grid-column:
            1 / -1 !important;
    }


    /*
     * Tim 4 orang pada viewport medium:
     * anggota ke-3 dibuat full width agar tidak pincang.
     */

    .participant-person-stack-v55:
    has(> article:nth-of-type(4)):
    not(:has(> article:nth-of-type(5)))
    > article:nth-of-type(4) {

        grid-column:
            1 / -1 !important;
    }


    .participant-team-card-v55 {

        grid-template-columns:
            1fr !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .participant-data-team-v55 {

        overflow:
            hidden !important;

        border:
            1px solid
            #dfe5ef !important;

        border-radius:
            18px !important;

        background:
            #ffffff !important;

        box-shadow:
            0 10px 28px
            rgba(
                31,
                49,
                88,
                .06
            ) !important;
    }


    .participant-team-card-v55 {

        padding:
            18px
            15px !important;

        border:
            0 !important;

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

        border-radius:
            0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;
    }


    .participant-person-stack-v55 {

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            12px !important;

        padding:
            15px !important;

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

        background:
            transparent !important;
    }


    .participant-person-card-v55 {

        grid-column:
            auto !important;

        padding:
            16px !important;

        border:
            1px solid
            #e0e6ef !important;

        border-radius:
            15px !important;

        background:
            #ffffff !important;

        box-shadow:
            none !important;
    }


    .participant-person-card-v55:not(.is-leader)
    .participant-person-head-v55 {

        margin-bottom:
            13px !important;
    }


    .participant-person-card-v55:not(.is-leader)
    .participant-person-fields-v55 {

        grid-template-columns:
            1fr !important;
    }


    .participant-member-control-v58 {

        padding:
            14px !important;

        border:
            0 !important;

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

        border-radius:
            0 !important;
    }


    .participant-save-v55 {

        margin:
            0 !important;

        padding:
            13px
            14px !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;
    }

}



/* ============================================================
   INCEPTION_V59A_LEADER_HEADER_TOP

   Ketua mengikuti hierarchy card anggota:
   Header di atas -> divider -> fields di bawah.
   ============================================================ */

@media (min-width: 1100px) {

    /*
     * V59 sebelumnya memakai:
     * header kiri + fields kanan.
     *
     * V59A ubah menjadi:
     * header atas + fields bawah.
     */

    .participant-person-card-v55.is-leader {

        display:
            block !important;

        padding:
            18px !important;
    }


    /* ========================================================
       KETUA HEADER
       ======================================================== */

    .participant-person-card-v55.is-leader
    .participant-person-head-v55 {

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            11px !important;

        width:
            100% !important;

        margin:
            0
            0
            16px !important;

        padding:
            0
            0
            13px !important;

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

        box-sizing:
            border-box !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-head-v55 > b {

        width:
            39px !important;

        height:
            39px !important;

        flex:
            0
            0
            39px !important;

        border-radius:
            11px !important;

        font-size:
            11px !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-head-v55 > div {

        display:
            grid !important;

        gap:
            2px !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-head-v55 strong {

        font-size:
            13.5px !important;

        font-weight:
            800 !important;

        color:
            #25314a !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-head-v55 span {

        display:
            block !important;

        color:
            #8590a7 !important;

        font-size:
            9.5px !important;
    }


    /* ========================================================
       KETUA FIELDS
       2 x 2
       ======================================================== */

    .participant-person-card-v55.is-leader
    .participant-person-fields-v55 {

        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            12px
            15px !important;

        width:
            100% !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-fields-v55 label {

        gap:
            6px !important;

        font-size:
            10.5px !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-fields-v55 input {

        width:
            100% !important;

        height:
            43px !important;

        padding:
            0
            12px !important;

        box-sizing:
            border-box !important;

        border-radius:
            10px !important;

        font-size:
            12.5px !important;
    }

}


/* ============================================================
   MEDIUM DESKTOP / TABLET
   ============================================================ */

@media
    (min-width: 901px)
    and (max-width: 1099px) {

    .participant-person-card-v55.is-leader {

        display:
            block !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-head-v55 {

        width:
            100% !important;

        margin-bottom:
            15px !important;

        padding-bottom:
            12px !important;

        border-bottom:
            1px solid
            #edf0f5 !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-fields-v55 {

        display:
            grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            12px !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .participant-person-card-v55.is-leader {

        display:
            block !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-head-v55 {

        margin-bottom:
            14px !important;

        padding-bottom:
            12px !important;

        border-bottom:
            1px solid
            #edf0f5 !important;
    }


    .participant-person-card-v55.is-leader
    .participant-person-fields-v55 {

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            11px !important;
    }

}


/* ============================================================
   INCEPTION_V59C_KARTU_BOTTOM_LINE
   Tambah garis bawah antara Kartu Pelajar -> Ketua Tim
   ============================================================ */

.participant-document-card-v55 {
    border-bottom:
        1px solid #e7edf7 !important;

    padding-bottom:
        18px !important;

    margin-bottom:
        18px !important;
}

/* kalau ada wrapper hasil merge V59/V59A */
.participant-team-card-v55 .participant-document-card-v55 {
    border-bottom:
        1px solid #e7edf7 !important;

    padding-bottom:
        18px !important;

    margin-bottom:
        18px !important;
}

/* rapikan jarak card ketua setelah garis */
.participant-document-card-v55 + .participant-person-card-v55,
.participant-team-card-v55 .participant-document-card-v55 + .participant-person-card-v55 {
    margin-top:
        0 !important;
}



/* ============================================================
   INCEPTION_V59D_REAL_KARTU_DIVIDER

   Selector benar setelah V56:
   .participant-team-document-v56

   Profil Tim
   ----------------
   Kartu Pelajar
   ----------------   <- V59D
   Ketua Tim
   ============================================================ */

@media (min-width: 901px) {

    .participant-team-document-v56 {

        /*
         * Pertahankan divider ATAS yang sudah bagus.
         */

        border-top:
            1px solid #e5eaf2 !important;


        /*
         * Divider BAWAH baru.
         */

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


        /*
         * Supaya garis bawah tidak menempel ke file/button.
         */

        padding-bottom:
            16px !important;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .participant-team-document-v56 {

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

        padding-bottom:
            14px !important;
    }

}