/* ==========================================================
   Assignment Grade Modal
========================================================== */

.asgGradeModal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:20px;
}

.asgGradeModal-overlay.active{
    display:flex;
}

.asgGradeModal-window{
    width:100%;
    max-width:750px;
    max-height:90vh;

    background:#fff;
    border-radius:14px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.3);
    animation:asgGradeModalShow .18s ease;
}

@keyframes asgGradeModalShow{

    from{
        opacity:0;
        transform:translateY(-15px) scale(.98);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.asgGradeModal-header{
flex-shrink:0;
    padding:18px 25px;
    border-bottom:1px solid #ececec;
    background:#f8f9fb;
}

.asgGradeModal-title{

    margin:0;
    font-size:24px;
    font-weight:700;
    color:#222;
}

.asgGradeModal-subtitle{

    margin-top:8px;
    font-size:17px;
    color:#555;
}

.asgGradeModal-body{
    padding:25px;

    flex:1;

    overflow-y:auto;
    overflow-x:hidden;
}

.asgGradeModal-row{

    margin-bottom:22px;
}

.asgGradeModal-label{

    display:block;
    margin-bottom:8px;
    font-weight:600;
    font-size:16px;
    color:#333;
}

.asgGradeModal-gradeWrap{

    display:flex;
    align-items:center;
    gap:10px;
}

.asgGradeModal-gradeInput{

    width:130px;
    height:44px;
    border:1px solid #cfd5dc;
    border-radius:8px;
    padding:0 12px;
    font-size:18px;
    outline:none;
    transition:.15s;
}

.asgGradeModal-gradeInput:focus{

    border-color:#2d7ff9;
    box-shadow:0 0 0 3px rgba(45,127,249,.12);
}

.asgGradeModal-max{

    font-size:18px;
    font-weight:600;
    color:#555;
}

.asgGradeModal-editor{

    min-height:220px;
}

.asgGradeModal-message{

    display:none;
    margin-bottom:20px;
    padding:13px 16px;
    border-radius:8px;
    font-size:15px;
    line-height:1.5;
}

.asgGradeModal-message.show{

    display:block;
}

.asgGradeModal-message.error{

    background:#ffe7e7;
    color:#b30000;
    border:1px solid #ffb5b5;
}

.asgGradeModal-message.success{

    background:#e8f8e8;
    color:#107010;
    border:1px solid #a8e0a8;
}

.asgGradeModal-footer{

    display:flex;
    justify-content:flex-end;
    gap:12px;
    padding:18px 25px;
    border-top:1px solid #ececec;
    background:#fafafa;
    flex-shrink:0;
}

.asgGradeModal-btn{

    min-width:120px;
    height:44px;
    border:none;
    border-radius:8px;
    font-size:15px;
    cursor:pointer;
    transition:.15s;
}

.asgGradeModal-btnCancel{

    background:#dadada;
    color:#333;
}

.asgGradeModal-btnCancel:hover{

    background:#cfcfcf;
}

.asgGradeModal-btnSave{

    background:#b8d8ff;
    color:#fff;

    border:none;

    padding:12px 24px;

    border-radius:8px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.asgGradeModal-btnSave:disabled{

    background:#cfe3ff;

    color:#ffffff;

    cursor:not-allowed;

    opacity:.75;

}

.asgGradeModal-btnSave:not(:disabled){

    background:#0d6efd;

    color:#fff;

    cursor:pointer;

    opacity:1;

}

.asgGradeModal-btnSave:not(:disabled):hover{

    background:#0b5ed7;

}

.ck-editor__editable_inline{

    min-height:220px;
}

.asgGradeModal-message{

    display:none;

    padding:14px 18px;

    border-radius:8px;

    margin-bottom:20px;

    font-size:15px;

    font-weight:600;

}

.asgGradeModal-message-success{

    display:block;

    background:#d1f7dc;

    border:1px solid #77d18f;

    color:#11662d;

}

.asgGradeModal-message-error{

    display:block;

    background:#ffe1e1;

    border:1px solid #ef8c8c;

    color:#b60000;

}


.asgSummaryRow td{
    padding:0;
    border:none;
    background:transparent;
}

.asgSummaryBox{
    margin:24px 0 4px;
    padding:4px 4px;
    background:#eef6ff;
    border-left:5px solid #2b7de9;
    border-radius:8px;
}

.asgSummaryTitle{
    font-size:14px;
    color:#666;
    margin-bottom:6px;
}

.asgSummaryGrade{
    font-size:22px;
    font-weight:700;
    color:#1558c0;
}

.asgResubmitSwitch{

display:inline-block;
position:relative;
width:54px;
height:28px;
cursor:pointer;

}

.asgResubmitSwitch input{

display:none;

}

.asgResubmitSlider{

position:absolute;
top:0;
left:0;
right:0;
bottom:0;

background:#cfd8dc;

border-radius:30px;

transition:.25s;

}

.asgResubmitSlider:before{

content:"";

position:absolute;

width:22px;
height:22px;

left:3px;
top:3px;

background:#fff;

border-radius:50%;

transition:.25s;

box-shadow:0 2px 6px rgba(0,0,0,.25);

}

.asgResubmitSwitch input:checked
+.asgResubmitSlider{

background:#2e7d32;

}

.asgResubmitSwitch input:checked
+.asgResubmitSlider:before{

transform:translateX(26px);

}

.asgResubmitSwitch input:disabled
+.asgResubmitSlider{

background:#e0e0e0;

cursor:not-allowed;

opacity:.7;

}

.asgResubmitWarning{

margin-top:18px;

padding:14px;

border-radius:8px;

background:#ffebee;

border:1px solid #ef9a9a;

color:#c62828;

font-weight:600;

}

#asgSubmissionText{

    padding:15px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;

    max-height:350px;

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

    word-break:break-word;
    overflow-wrap:anywhere;

}

/* всі картинки всередині онлайн-тексту */

#asgSubmissionText img{

    display:block;

    max-width:100% !important;
    width:auto;
    height:auto !important;

    margin:10px auto;

    cursor:zoom-in;

}

/* таблиці */

#asgSubmissionText table{

    max-width:100%;

    display:block;

    overflow-x:auto;

}

/* iframe */

#asgSubmissionText iframe,
#asgSubmissionText video{

    max-width:100%;

}

#asgFilesBlock a{

display:block;

margin-bottom:8px;

text-decoration:none;

font-weight:600;

}

.asgResubmitAttemptCard{

    border:2px solid #2e7d32;

}

.asgResubmitStatus{

    color:#2e7d32;

    font-weight:700;

}

.attempt-actions-submissions{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.attempt-history-btn{
    background:#fff3b0;
    color:#7a5a00;
    border:1px solid #e6d37a;
}

.attempt-history-btn:hover{
    background:#ffe680;
}

.asgHistoryAttempt{
    border:1px solid #dcdcdc;
    border-radius:8px;
    margin-bottom:18px;
    overflow:hidden;
    background:#fff;
}

.asgHistoryAttemptHeader{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    background:#f5f7fa;
    cursor:pointer;
    user-select:none;
    font-size:18px;
    font-weight:600;
}

.asgHistoryAttemptHeader:hover{
    background:#eef3f8;
}

.asgHistoryTriangle{
    display:inline-block;
    transition:transform .25s;
}

.asgHistoryAttempt.open .asgHistoryTriangle{
    transform:rotate(90deg);
}

.asgHistoryAttemptBody{
    display:none;
    padding:20px;
}

.asgHistoryAttempt.open .asgHistoryAttemptBody{
    display:block;
}

.asgHistoryGradeWrapper{
    display:flex;
    align-items:center;
    gap:12px;
}

.asgHistoryGradeInput{
    width:110px;
    height:42px;
    padding:8px 12px;
    border:1px solid #cfd7df;
    border-radius:6px;
    font-size:17px;
    font-weight:600;
    text-align:center;
    transition:.2s;
    background:#fff;
}

.asgHistoryGradeInput:focus{
    outline:none;
    border-color:#2b7cff;
    box-shadow:0 0 0 3px rgba(43,124,255,.15);
}

.asgHistoryGradeWrapper span{
    font-size:17px;
    font-weight:600;
    color:#555;
}