@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/*
 * Seluruh lebar elemen dihitung termasuk padding dan border.
 * Tanpa aturan ini, width:100% pada layar HP masih dapat melebihi viewport.
 */
*,*::before,*::after{box-sizing:border-box}

.ukw-icon-action{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 40px!important;
    border-radius:9px!important;
    line-height:1!important;
    vertical-align:middle;
}
.ukw-icon-action .ukw-action-symbol{font-size:19px;line-height:1}
.ukw-action-with-label{width:auto!important;min-width:0!important;padding:0 14px!important;flex:0 0 auto!important;gap:8px!important}
.ukw-action-with-label .ukw-action-label{display:inline!important;font:700 13px/1.2 Arial,sans-serif}
figcaption,.ukw-caption,.attachment-caption,[class*="photo-caption"]{font-style:italic!important}
.ukw-visually-hidden{
    position:absolute!important;width:1px!important;height:1px!important;
    padding:0!important;margin:-1px!important;overflow:hidden!important;
    clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.ukw-action-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
.top-actions{display:flex!important;align-items:center!important;gap:8px!important;width:100%}
.top-actions>:nth-child(2){margin-left:auto!important}
.ukw-actions{display:flex;align-items:center;gap:10px}
.ukw-actions>.ukw-button:last-child{margin-left:auto}
.ukw-keep-label{width:auto!important;min-width:0!important;height:auto!important;min-height:40px!important;padding:9px 14px!important;flex:0 0 auto!important}
.ukw-text-only-action::before,.ukw-text-only-action>i{display:none!important}
.bulk-actions .btn-mini,.action-cell .btn-mini{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:auto!important;min-width:92px!important;min-height:38px!important;padding:8px 12px!important;
    gap:7px!important;white-space:nowrap!important;
}
.action-cell{min-width:115px}
.ukw-form-reminder{
    position:fixed;left:50%;top:18px;z-index:5000;display:flex;align-items:flex-start;gap:10px;
    width:min(560px,calc(100% - 24px));padding:13px 14px;border:1px solid #f6ad55;border-left:5px solid #dd6b20;
    border-radius:8px;background:#fffaf0;color:#744210;box-shadow:0 12px 30px rgba(15,23,42,.2);
    font:700 13px/1.5 Arial,sans-serif;transform:translate(-50%,-140%);opacity:0;transition:.22s ease;
}
.ukw-form-reminder.show{transform:translate(-50%,0);opacity:1}
.ukw-form-reminder>i{margin-top:2px;color:#dd6b20;font-size:17px}.ukw-form-reminder>span{flex:1}
.ukw-form-reminder button{border:0;background:transparent;color:#744210;cursor:pointer;font-size:15px}
.ukw-field-incomplete{border-color:#e53e3e!important;box-shadow:0 0 0 3px rgba(229,62,62,.14)!important}
.ukw-action-toast-region{
    position:fixed;right:16px;bottom:16px;z-index:6000;display:flex;flex-direction:column;
    align-items:flex-end;gap:8px;width:min(420px,calc(100% - 24px));pointer-events:none;
}
.ukw-action-toast{
    display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:100%;padding:9px 10px 9px 12px;
    border:1px solid #cbd5e0;border-left:4px solid #3182ce;border-radius:7px;background:#fff;color:#2d3748;
    box-shadow:0 8px 22px rgba(15,23,42,.18);font:600 12.5px/1.45 Arimo,Arial,sans-serif;
    opacity:0;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease;pointer-events:auto;
}
.ukw-action-toast.show{opacity:1;transform:translateY(0)}
.ukw-action-toast.success{border-left-color:#2f855a;background:#f0fff4;color:#22543d}
.ukw-action-toast.warning{border-left-color:#dd6b20;background:#fffaf0;color:#744210}
.ukw-action-toast.error{border-left-color:#c53030;background:#fff5f5;color:#742a2a}
.ukw-action-toast>span{flex:1;min-width:0}
.ukw-action-toast>button{
    flex:0 0 auto;margin:-3px -3px -3px 0;padding:1px 4px;border:0;background:transparent;
    color:inherit;font:700 18px/1 Arial,sans-serif;cursor:pointer;
}
@media(max-width:600px){
    .ukw-action-toast-region{right:8px;bottom:8px;width:calc(100% - 16px)}
    .ukw-action-toast{width:100%}
}

/* Tata ruang adaptif lintas halaman peserta, penguji, dan admin. */
html{width:100%;max-width:100%;overflow-x:clip;height:100%}
body{width:100%;max-width:100%;min-width:0;overflow-x:clip;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/*
 * Footer sistem selalu menempel di bawah layar meski isi halaman pendek
 * (mis. dashboard penguji/peserta tanpa data), dan tetap mengikuti alur
 * dokumen bila isi halaman panjang. Elemen fixed/absolute (topbar, modal,
 * tombol scroll-top) tidak terpengaruh karena sudah keluar dari alur flex.
 */
body>main.ukw-page,body>.container,body>.wrap{flex:1 0 auto;width:100%}
.ukw-system-footer{flex-shrink:0}
.navbar{width:100%;max-width:100%;box-sizing:border-box}
.navbar>div,.navbar-brand,.admin-nav-profile{min-width:0}
.navbar-brand span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.container,.wrap,.grid,.grid>*,form,fieldset{min-width:0}
form,fieldset{max-width:100%}
.ukw-page{
    width:100%!important;
    max-width:1180px!important;
    margin:clamp(14px,2.5vw,30px) auto 36px!important;
    padding-inline:clamp(10px,2vw,20px)!important;
}
body>.container{
    width:min(1350px,calc(100% - 32px));
    margin-left:auto!important;
    margin-right:auto!important;
}
body>.wrap{width:min(1200px,calc(100% - 32px));margin-left:auto!important;margin-right:auto!important}
.ukw-responsive-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:5px}
img,video,canvas,svg{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
.modal,.modal-box,.card,.panel,.ukw-panel,.ukw-field,.participant,.unit{min-width:0}
@media(min-width:1440px){.ukw-page{max-width:1280px!important}.official-toolbar{max-width:1180px}}
@media(min-width:769px) and (max-width:1100px){
    .ukw-page{padding-inline:14px!important}
    body>.container{width:calc(100% - 24px);padding:20px}
}
@media(max-width:900px){
    .grid,.form-grid,.review-control-grid,.assessment-form-grid,.participant-picker,.network-selection-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }
    .header,.page-header,.participant-head,.unit-head,.toolbar,.topbar-actions{
        min-width:0;max-width:100%;flex-wrap:wrap;
    }
    .modal-box,.modal-content{width:calc(100% - 20px)!important;max-width:720px!important;max-height:calc(100vh - 20px);overflow:auto}
    .ukw-table-scroll,.table-scroll,.table-responsive{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .ukw-responsive-table-wrap>table{width:max-content;min-width:100%;margin:0}
    pre,code{max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap}
}
@media(max-width:600px){
    /* Tombol kembali tidak diperlukan di HP karena navigasi browser tetap tersedia. */
    .ukw-mobile-back{display:none!important}
    body{padding-left:0!important;padding-right:0!important;font-size:14px;line-height:1.5}
    .navbar{
        left:0!important;right:auto!important;width:100%!important;max-width:100%!important;
        padding-inline:10px!important;
    }
    .navbar>div:first-child{min-width:0;max-width:calc(100% - 46px)}
    .navbar-brand{min-width:0;margin-left:6px!important;font-size:14px!important}
    .navbar-brand img{width:auto!important;max-width:28px!important;height:28px!important;flex:0 0 auto}
    .admin-nav-profile{margin-left:8px;flex:0 0 auto}
    .btn-home{width:36px!important;height:36px!important}
    main,.main,.content,.main-content,.page-content{min-width:0;max-width:100%}
    .card,.panel,.ukw-panel,.participant,.unit,.participant-card,.unit-card{
        max-width:100%!important;margin-bottom:12px!important;border-radius:10px!important;
    }
    .card,.panel,.participant-card,.unit-card{padding:14px!important}
    .header,.page-header,.participant-head,.unit-head{gap:10px!important}
    .header h1,.page-header h1,.participant-head h2,.unit-head h2{margin:0!important;overflow-wrap:anywhere}
    p{overflow-wrap:anywhere}
    .ukw-icon-action{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;flex-basis:44px!important}
    .ukw-action-with-label{width:auto!important;min-width:0!important;padding:0 13px!important;flex-basis:auto!important}
    .ukw-action-row{width:100%;justify-content:flex-end}
    .top-actions{flex-wrap:wrap}.top-actions>:nth-child(2){margin-left:auto!important}
    .ukw-actions{width:100%;justify-content:space-between}
    .official-toolbar{align-items:stretch}
    .official-toolbar-group{align-items:center;justify-content:space-between}
    .ukw-page{margin:6px auto 18px!important;padding-inline:8px!important}
    .ukw-panel{border-radius:8px}
    .ukw-panel-head,.ukw-panel-body{padding:14px!important}
    .ukw-field{padding:13px;margin-bottom:13px}
    body>.container{
        width:calc(100vw - 12px)!important;width:calc(100dvw - 12px)!important;
        max-width:calc(100vw - 12px)!important;max-width:calc(100dvw - 12px)!important;
        margin:62px auto 0!important;padding:14px!important;
    }
    body>.wrap{
        width:calc(100vw - 12px)!important;width:calc(100dvw - 12px)!important;
        max-width:calc(100vw - 12px)!important;max-width:calc(100dvw - 12px)!important;
        margin:62px auto 0!important;padding:14px!important;overflow:hidden;
    }
    body>.wrap>table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    body>.wrap form{grid-template-columns:1fr!important;min-width:240px}
    .official-document-body{padding:6px!important}
    .official-page{margin-bottom:10px!important}
    h1{font-size:clamp(20px,7vw,28px)}h2{font-size:clamp(18px,6vw,24px)}h3{font-size:clamp(16px,5vw,20px)}
    .summary-grid,.details,.participant-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .filters{grid-template-columns:minmax(0,1fr)!important}
    .participant-head,.unit-head{gap:9px}
    .ukw-attachment-row{grid-template-columns:minmax(0,1fr)!important}
    .ukw-file-item,.network-file-existing{align-items:flex-start!important;flex-direction:column!important}
    /* Form dan modal: tidak ada kolom/aksi yang terpotong. */
    .modal,.modal-overlay{padding:8px!important;align-items:flex-end!important}
    .modal-box,.modal-content{
        width:100%!important;max-width:none!important;max-height:calc(100dvh - 16px)!important;
        margin:0!important;padding:18px!important;border-radius:14px 14px 8px 8px!important;
        overflow-x:hidden!important;overflow-y:auto!important;
    }
    .modal-head{position:sticky;top:-18px;z-index:2;margin:-18px -18px 14px;padding:16px 18px 12px;background:#fff}
    .modal-box form,.modal-content form{width:100%!important;min-width:0!important}
    .modal-box input,.modal-box select,.modal-box textarea,.modal-content input,.modal-content select,.modal-content textarea{
        width:100%!important;min-width:0!important;font-size:16px!important;padding:11px 12px!important;
    }
    .modal-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;width:100%!important}
    .modal-actions form,.modal-actions button,.ukw-modal-action{width:100%!important;max-width:none!important}
    .ukw-modal-action{display:inline-flex!important;min-height:44px!important;padding:10px 14px!important;gap:8px!important}
    /* Mode edit HP tampil sebagai halaman tersendiri, bukan dialog mengambang. */
    body.ukw-edit-page-open{overflow:hidden!important}
    .modal.ukw-mobile-edit-page,.modal-overlay.ukw-mobile-edit-page{
        display:block!important;position:fixed!important;inset:0!important;z-index:3000!important;
        width:100%!important;height:100dvh!important;padding:0!important;background:#f4f7fa!important;overflow:auto!important;
    }
    .ukw-mobile-edit-page .modal-box,.ukw-mobile-edit-page .modal-content{
        width:100%!important;min-height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;
        padding:20px 16px 30px!important;box-shadow:none!important;
    }
    .ukw-mobile-edit-page .modal-head{position:static!important;margin:0 0 18px!important;padding:0 0 12px!important;border-bottom:1px solid #e2e8f0}
    .ukw-edit-page-cancel{
        float:none!important;display:inline-flex!important;align-items:center!important;gap:7px!important;
        width:auto!important;min-height:40px!important;margin:0 0 16px auto!important;padding:8px 11px!important;
        border:1px solid #cbd5e0!important;border-radius:7px!important;background:#fff!important;color:#334155!important;
        font-size:13px!important;font-weight:800!important;
    }
    .ukw-mobile-edit-page h3{margin:0 0 18px!important;font-size:21px!important}
    .ukw-mobile-edit-page label{margin-top:13px!important}
    .ukw-mobile-edit-page .modal-actions,.ukw-mobile-edit-page .actions{margin-top:16px!important}
    /* Tabel sederhana memenuhi layar; tabel besar digeser, bukan dipotong. */
    .ukw-responsive-table-wrap{margin:8px 0 14px;border:1px solid #dbe3ec;border-radius:9px;background:#fff}
    table.ukw-table-compact{width:100%!important;min-width:100%!important;table-layout:fixed!important}
    table.ukw-table-compact th,table.ukw-table-compact td{
        width:auto!important;padding:9px 8px!important;font-size:12px!important;line-height:1.4!important;
        white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
    }
    table.ukw-table-wide{width:max-content!important;min-width:680px!important}
    table.ukw-table-wide th,table.ukw-table-wide td{
        padding:9px 10px!important;font-size:12px!important;line-height:1.4!important;vertical-align:top!important;
        white-space:normal!important;overflow-wrap:anywhere!important;
    }
    table.ukw-table-wide th{white-space:nowrap!important}
    table input,table select,table textarea{min-width:110px;max-width:240px}
    /* Toolbar/filter tidak meluber dan tombol utama tetap mudah disentuh. */
    .toolbar,.filters,.actions,.topbar-actions,.batch-actions,.control-actions{gap:8px!important}
    .filters>*{width:100%!important;min-width:0!important}
    .tabs,.status-tabs{max-width:100%;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px;-webkit-overflow-scrolling:touch}
    .tabs>*,.status-tabs>*{flex:0 0 auto}
    /* Lembar resmi tetap terbaca tanpa meniru lebar kertas desktop. */
    .official-toolbar{padding:8px!important;gap:8px!important}
    .official-page,.ukw-sheet{
        width:100%!important;min-width:0!important;max-width:100%!important;margin-inline:auto!important;
        padding:clamp(18px,5vw,30px)!important;box-shadow:none!important;
    }
    .official-page table,.ukw-sheet table{max-width:100%!important;table-layout:fixed!important}
    .official-page th,.official-page td,.ukw-sheet th,.ukw-sheet td{overflow-wrap:anywhere;word-break:normal}
    .official-page img,.ukw-sheet img{max-width:100%!important;height:auto!important}
    .official-page h1,.official-page h2,.official-page h3,.ukw-sheet h1,.ukw-sheet h2,.ukw-sheet h3{line-height:1.25!important}
    .identity,.ukw-identity,.official-identity{width:100%!important;min-width:0!important;table-layout:fixed!important}
    .identity td,.ukw-identity td,.official-identity th,.official-identity td{
        min-width:0!important;padding:5px 2px!important;white-space:normal!important;overflow-wrap:anywhere!important;
    }
    .identity td:nth-child(1),.ukw-identity td:nth-child(1){width:16%!important}
    .identity td:nth-child(2),.ukw-identity td:nth-child(2){width:3%!important}
    .identity td:nth-child(3),.ukw-identity td:nth-child(3){width:31%!important}
    .identity td:nth-child(4),.ukw-identity td:nth-child(4){width:4%!important}
    .identity td:nth-child(5),.ukw-identity td:nth-child(5){width:14%!important;padding-left:6px!important}
    .identity td:nth-child(6),.ukw-identity td:nth-child(6){width:3%!important}
    .identity td:nth-child(7),.ukw-identity td:nth-child(7){width:29%!important}
    /*
     * Pembungkus halaman mengikuti viewport perangkat secara langsung.
     * Jangan memaksa semua .container internal menjadi 100% karena dapat
     * membuat persentasenya dihitung dari pembungkus yang salah.
     */
    body>.container,body>.wrap{
        min-width:0!important;
        width:calc(100vw - 12px)!important;width:calc(100dvw - 12px)!important;
        max-width:calc(100vw - 12px)!important;max-width:calc(100dvw - 12px)!important;
        margin-left:auto!important;margin-right:auto!important;
    }
    .container,.wrap{min-width:0!important}
    .container>.grid,.wrap>.grid,.container>.layout,.wrap>.layout{
        width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr)!important;
    }
    .container .card,.wrap .card,.container .panel,.wrap .panel,
    .container .page-head,.wrap .page-head,.container .group-card,.wrap .group-card{
        width:100%!important;max-width:100%!important;min-width:0!important;
    }
    .table-scroll,.table-wrap,.table-responsive,.ukw-responsive-table-wrap{
        width:100%!important;max-width:100%!important;min-width:0!important;
    }
    .unit-head>div:last-child:has(.status-chip){display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;width:100%!important}
    .unit-head>div:last-child:has(.status-chip) .ukw-action-with-label{min-height:42px!important}
    .bulk-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;gap:8px!important}
    .bulk-actions .btn-mini{width:100%!important;max-width:none!important}
    .action-cell .btn-mini{width:100%!important;min-width:100px!important}
}
@media(max-width:380px){
    .ukw-page{padding-inline:4px!important}
    .ukw-panel-head,.ukw-panel-body{padding:11px!important}
    .ukw-field{padding:11px}
    body>.container,body>.wrap{
        width:calc(100vw - 8px)!important;width:calc(100dvw - 8px)!important;
        max-width:calc(100vw - 8px)!important;max-width:calc(100dvw - 8px)!important;
        padding:10px!important;
    }
    .summary-grid,.details,.participant-summary{grid-template-columns:minmax(0,1fr)!important}
}

/*
 * Pada HP, pembungkus utama mengisi seluruh area perangkat di bawah navbar.
 * min-height menjaga halaman pendek tetap mencapai bagian bawah layar,
 * sedangkan halaman dengan isi panjang tetap dapat tumbuh dan digulir.
 */
@media(max-width:600px){
    html,body{
        min-height:100%;
    }
    body{
        min-height:100vh;
        min-height:100dvh;
        padding:0!important;
    }
    body>.container,
    body>.wrap{
        width:100%!important;
        max-width:none!important;
        min-height:calc(100vh - 60px)!important;
        min-height:calc(100dvh - 60px)!important;
        margin:60px 0 0!important;
        border-radius:0!important;
    }
}

.ukw-scroll-top{
    position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));
    z-index:2990;display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;padding:0;border:0;border-radius:50%;
    background:#2f80c9;color:#fff;box-shadow:0 8px 22px rgba(15,42,70,.28);
    font-size:23px;line-height:1;cursor:pointer;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease,background-color .2s ease;
}
.ukw-scroll-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.ukw-scroll-top:hover,.ukw-scroll-top:focus-visible{background:#236ba9;outline:3px solid rgba(47,128,201,.25);outline-offset:3px}
.ukw-scroll-top i{display:block;line-height:1}
@media(max-width:600px){
    .ukw-scroll-top{right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:46px;height:46px;font-size:22px}
}
@media print{.ukw-icon-action,.ukw-scroll-top{display:none!important}.ukw-responsive-table-wrap{overflow:visible!important}.ukw-responsive-table-wrap>table{width:100%!important;min-width:0!important}}

/* Footer identitas sistem pada seluruh area admin, penguji, dan peserta. */
.ukw-system-footer{
    width:min(1180px,calc(100% - 32px));
    margin:32px auto 0;
    padding:18px 16px;
    border-top:1px solid #d8dee7;
    color:#718096;
    font-family:"Arimo",Arial,sans-serif;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}
.official-document>.ukw-system-footer{
    width:100%;
    margin-top:10mm;
}
@media(max-width:600px){
    .ukw-system-footer{
        width:calc(100% - 24px);
        margin-top:24px;
        padding:16px 10px;
        font-size:11px;
    }
}
@media print{
    .ukw-system-footer{
        width:100%;
        margin-top:8mm;
        padding:4mm 0 0;
        border-top:1px solid #9ca3af;
        color:#374151;
        font-size:9pt;
        break-inside:avoid;
    }
}