/* ============================================================
   FINANCE ONLINE SEKOLAH
   SHARED TOOLBAR ENGINE
   ============================================================ */

.finance-toolbar {

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

    display: flex;

    align-items: center;

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

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

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

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

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

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

    overflow-x: auto;
}


.finance-toolbar-group {

    display: flex;

    align-items: center;

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

    flex-shrink: 0;
}


.finance-toolbar-spacer {

    flex: 1;
}


.finance-toolbar-separator {

    width: 1px;

    height: 28px;

    flex-shrink: 0;

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


.finance-toolbar-button {

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

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

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

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

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

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

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

    cursor: pointer;

    white-space: nowrap;

    transition:
        background var(--finance-transition),
        border-color var(--finance-transition),
        color var(--finance-transition),
        opacity var(--finance-transition);
}


.finance-toolbar-button:hover:not(:disabled) {

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

    border-color:
        #abb5bf;
}


.finance-toolbar-button:active:not(:disabled) {

    transform:
        translateY(1px);
}


.finance-toolbar-button:disabled {

    opacity: .42;

    cursor: not-allowed;
}


.finance-toolbar-button-primary {

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

    background:
        var(--finance-primary);

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


.finance-toolbar-button-primary:hover:not(:disabled) {

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

    background:
        var(--finance-primary-dark);
}


.finance-toolbar-button-success {

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

    background:
        var(--finance-success);

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


.finance-toolbar-button-danger {

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

    color:
        var(--finance-danger);

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


.finance-toolbar-icon {

    min-width: 16px;

    text-align: center;

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


.finance-toolbar-mode {

    padding:
        6px 10px;

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

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

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

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

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

    white-space: nowrap;
}


/* ============================================================
   MODE VISUAL
   ============================================================ */

.finance-toolbar[data-toolbar-mode="NEW"]
.finance-toolbar-mode {

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

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


.finance-toolbar[data-toolbar-mode="EDIT"]
.finance-toolbar-mode {

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

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


.finance-toolbar[data-toolbar-mode="VIEW"]
.finance-toolbar-mode {

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

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


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .finance-toolbar {

        align-items:
            flex-start;

        flex-wrap:
            nowrap;
    }


    .finance-toolbar-button span:last-child {

        display:
            none;
    }


    .finance-toolbar-button {

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

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

}