/* ============================================================
   FINANCE ONLINE SEKOLAH
   MODAL / SHOWDIALOG ENGINE
   ============================================================ */

.finance-modal-backdrop {

    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        var(--finance-space-6);

    background:
        rgba(18, 29, 41, .52);
}


.finance-modal-backdrop[hidden] {

    display:
        none;
}


.finance-modal-window {

    width:
        min(840px, 96vw);

    max-height:
        92vh;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--finance-bg-panel);

    border:
        1px solid var(--finance-border-dark);

    border-radius:
        var(--finance-radius-lg);

    box-shadow:
        var(--finance-shadow-lg);

    overflow:
        hidden;
}


.finance-modal-header {

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--finance-space-4);

    padding:
        0 var(--finance-space-5);

    background:
        var(--finance-bg-soft);

    border-bottom:
        1px solid var(--finance-border);
}


.finance-modal-title-wrap {

    display:
        flex;

    align-items:
        center;

    gap:
        var(--finance-space-3);
}


.finance-modal-title {

    font-size:
        var(--finance-font-size-lg);

    font-weight:
        var(--finance-font-weight-semibold);

    color:
        var(--finance-text-primary);
}


.finance-modal-mode {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        22px;

    padding:
        0 var(--finance-space-3);

    border-radius:
        11px;

    background:
        var(--finance-info-light);

    color:
        var(--finance-info);

    font-size:
        var(--finance-font-size-xs);

    font-weight:
        var(--finance-font-weight-bold);
}


.finance-modal-close {

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        var(--finance-radius-md);

    background:
        transparent;

    color:
        var(--finance-text-secondary);

    font-size:
        24px;

    cursor:
        pointer;
}


.finance-modal-close:hover {

    background:
        var(--finance-danger-light);

    color:
        var(--finance-danger);
}


.finance-modal-body {

    flex:
        1;

    min-height:
        180px;

    padding:
        var(--finance-space-5);

    overflow:
        auto;
}


.finance-modal-placeholder {

    min-height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--finance-text-muted);

    background:
        var(--finance-bg-soft);

    border:
        1px dashed var(--finance-border-dark);

    border-radius:
        var(--finance-radius-md);
}


.finance-modal-footer {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        var(--finance-space-2);

    padding:
        var(--finance-space-3)
        var(--finance-space-5);

    background:
        var(--finance-bg-soft);

    border-top:
        1px solid var(--finance-border);
}


.finance-modal-backdrop[data-modal-mode="VIEW"]
.finance-modal-mode {

    background:
        var(--finance-success-light);

    color:
        var(--finance-success);
}


.finance-modal-backdrop[data-modal-mode="EDIT"]
.finance-modal-mode {

    background:
        var(--finance-warning-light);

    color:
        var(--finance-warning);
}


.finance-modal-backdrop[data-modal-mode="NEW"]
.finance-modal-mode {

    background:
        var(--finance-info-light);

    color:
        var(--finance-info);
}


@media (max-width: 700px) {

    .finance-modal-backdrop {

        align-items:
            stretch;

        padding:
            var(--finance-space-3);
    }


    .finance-modal-window {

        width:
            100%;

        max-height:
            100%;
    }

}