/* ============================================================
   FINANCE ONLINE SEKOLAH
   DATAGRID ENGINE
   ============================================================ */

.finance-datagrid-container {

    position: relative;

    min-width: 0;

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

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

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

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

    overflow:
        hidden;
}


.finance-datagrid-scroll {

    overflow:
        auto;

    max-width:
        100%;
}


.finance-datagrid {

    width: 100%;

    min-width: 850px;

    border-collapse:
        separate;

    border-spacing:
        0;

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


.finance-datagrid th {

    position: sticky;

    top: 0;

    z-index: 2;

    height: 42px;

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

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

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

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

    text-align:
        left;

    white-space:
        nowrap;
}


.finance-datagrid td {

    height: 40px;

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

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

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


.finance-datagrid tbody tr {

    cursor:
        pointer;
}


.finance-datagrid tbody tr:hover td {

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


.finance-datagrid tbody tr.finance-grid-row-selected td {

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


.finance-grid-header-button {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;

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

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        inherit;

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

    cursor:
        pointer;
}


.finance-grid-header-button:disabled {

    cursor:
        default;
}


.finance-grid-sort-icon {

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

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


.finance-grid-checkbox-column {

    width:
        42px;

    text-align:
        center !important;
}


.finance-grid-number-column {

    width:
        55px;

    text-align:
        center !important;

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


.finance-grid-status {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        64px;

    padding:
        4px 8px;

    border-radius:
        12px;

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

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


.finance-grid-status-draft {

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

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


.finance-grid-status-posted,
.finance-grid-status-approved {

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

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


.finance-grid-status-void {

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

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


.finance-grid-footer {

    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

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

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

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

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

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


.finance-grid-record-info {

    display:
        flex;

    align-items:
        center;

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


.finance-grid-pagination {

    display:
        flex;

    align-items:
        center;

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


.finance-grid-pagination button {

    min-width:
        30px;

    height:
        30px;

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

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

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

    cursor:
        pointer;
}


.finance-grid-pagination button:hover:not(:disabled) {

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


.finance-grid-pagination button:disabled {

    opacity:
        .4;

    cursor:
        not-allowed;
}


.finance-grid-loading {

    position:
        absolute;

    inset: 42px 0 46px 0;

    z-index: 5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(255, 255, 255, .84);

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

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


.finance-grid-loading[hidden] {

    display:
        none;
}


.finance-grid-empty {

    height:
        120px !important;

    text-align:
        center;

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


.finance-grid-empty strong,
.finance-grid-empty span {

    display:
        block;
}


.finance-grid-empty span {

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

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


@media (max-width: 900px) {

    .finance-grid-footer {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}