/* ============================================================
   FINANCE ONLINE SEKOLAH
   NOTIFICATION / MESSAGEBOX ENGINE
   ============================================================ */


/* ============================================================
   TOAST
   ============================================================ */

.finance-toast-container {

    position:
        fixed;

    top:
        calc(var(--finance-header-height) + 16px);

    right:
        18px;

    z-index:
        7000;

    width:
        min(380px, calc(100vw - 36px));

    display:
        flex;

    flex-direction:
        column;

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

    pointer-events:
        none;
}


.finance-toast {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        34px 1fr 26px;

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

    align-items:
        start;

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

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

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

    border-left:
        4px solid var(--finance-info);

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

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

    pointer-events:
        auto;

    animation:
        financeToastIn 160ms ease;
}


.finance-toast-success {

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


.finance-toast-warning {

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


.finance-toast-error {

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


.finance-toast-info {

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


.finance-toast-icon {

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    color:
        var(--finance-info);

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


.finance-toast-success .finance-toast-icon {

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

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


.finance-toast-warning .finance-toast-icon {

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

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


.finance-toast-error .finance-toast-icon {

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

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


.finance-toast-title {

    display:
        block;

    margin-bottom:
        var(--finance-space-1);

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


.finance-toast-message {

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

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

    line-height:
        1.45;
}


.finance-toast-close {

    width:
        24px;

    height:
        24px;

    border: 0;

    background:
        transparent;

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

    cursor:
        pointer;
}


/* ============================================================
   MESSAGEBOX
   ============================================================ */

.finance-messagebox-backdrop {

    position:
        fixed;

    inset:
        0;

    z-index:
        8000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

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


.finance-messagebox-backdrop[hidden] {

    display:
        none;
}


.finance-messagebox {

    position:
        relative;

    width:
        min(520px, 96vw);

    max-height:
        90vh;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

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

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

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

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


.finance-messagebox-accent {

    height:
        4px;

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


.finance-messagebox-header {

    min-height:
        64px;

    display:
        grid;

    grid-template-columns:
        40px 1fr 32px;

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

    align-items:
        center;

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

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


.finance-messagebox-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    color:
        var(--finance-info);

    font-size:
        18px;

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


.finance-messagebox-heading {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.finance-messagebox-title {

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

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


.finance-messagebox-level {

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

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

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


.finance-messagebox-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-muted);

    font-size:
        22px;

    cursor:
        pointer;
}


.finance-messagebox-close:hover {

    background:
        var(--finance-bg-hover);
}


.finance-messagebox-body {

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

    overflow:
        auto;
}


.finance-messagebox-message {

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

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

    line-height:
        1.55;
}


.finance-messagebox-detail {

    margin-top:
        var(--finance-space-4);

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

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

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

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

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

    font-size:
        var(--finance-font-size-sm);
}


.finance-confirm-reason,
.finance-confirm-phrase {

    margin-top:
        var(--finance-space-5);
}


.finance-confirm-textarea {

    min-height:
        82px;

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

    resize:
        vertical;
}


.finance-field-help {

    display:
        block;

    margin-top:
        var(--finance-space-2);

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

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


.finance-confirm-instruction {

    margin-bottom:
        var(--finance-space-2);

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

    font-size:
        var(--finance-font-size-sm);
}


.finance-messagebox-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-messagebox-button {

    min-height:
        var(--finance-control-height);

    min-width:
        86px;

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

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

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

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

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

    cursor:
        pointer;
}


.finance-messagebox-button-confirm {

    border-color:
        var(--finance-primary);

    background:
        var(--finance-primary);

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


.finance-messagebox-button-confirm:disabled {

    opacity:
        .42;

    cursor:
        not-allowed;
}


/* ============================================================
   TYPE COLORS
   ============================================================ */

.finance-messagebox-backdrop[data-message-type="SUCCESS"]
.finance-messagebox-accent {

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


.finance-messagebox-backdrop[data-message-type="SUCCESS"]
.finance-messagebox-icon {

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

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


.finance-messagebox-backdrop[data-message-type="WARNING"]
.finance-messagebox-accent {

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


.finance-messagebox-backdrop[data-message-type="WARNING"]
.finance-messagebox-icon {

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

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


.finance-messagebox-backdrop[data-message-type="ERROR"]
.finance-messagebox-accent {

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


.finance-messagebox-backdrop[data-message-type="ERROR"]
.finance-messagebox-icon {

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

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


.finance-messagebox-backdrop[data-message-type="CONFIRM"]
.finance-messagebox-accent {

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


.finance-messagebox-backdrop[data-message-type="CONFIRM"]
.finance-messagebox-icon {

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

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


@keyframes financeToastIn {

    from {

        opacity: 0;

        transform:
            translateY(-8px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@media (max-width: 600px) {

    .finance-messagebox-backdrop {

        align-items:
            flex-end;

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


    .finance-messagebox {

        width:
            100%;
    }

}