:root {
    --vkb-green: #b6c939;
    --vkb-green-50: #f7fbe8;
    --vkb-green-100: #eef7c5;
}

/* Tables */
.table.vkb-grid {
    border: 1px solid var(--vkb-green);
    border-collapse: separate;
    border-spacing: 0;
}

    .table.vkb-grid thead th {
        background: linear-gradient(var(--vkb-green-50),var(--vkb-green-100));
        border-top: 2px solid var(--vkb-green);
        border-bottom: 1px solid var(--vkb-green);
        color: #2b2b2b;
    }

    .table.vkb-grid tbody tr:hover td {
        background-color: var(--vkb-green-50) !important;
    }

    .table.vkb-grid tfoot th, .table.vkb-grid tfoot td {
        background: var(--vkb-green-50);
        border-top: 2px solid var(--vkb-green);
        text-align: right;
        font-weight: 600;
    }

/* DT Buttons styled like .btn-vkb */
.dataTables_wrapper .dt-buttons .dt-button {
    background: #fff !important;
    border: 1px solid var(--vkb-green) !important;
    color: #2b2b2b !important;
}

    .dataTables_wrapper .dt-buttons .dt-button:hover {
        background: var(--vkb-green-50) !important;
        border-color: var(--vkb-green) !important;
    }

/* Pager coloring + first/last */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--vkb-green) !important;
    border: 1px solid var(--vkb-green) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--vkb-green-50) !important;
    border: 1px solid var(--vkb-green) !important;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.8);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .loading-overlay .spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #b6c93933;
        border-top-color: #b6c939;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .loading-overlay .msg {
        margin-top: 10px;
        font-weight: 600;
        color: #4b5563;
    }

.d-none {
    display: none !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}