.data-grid {
    --grid-header-color: var(--area-color, #6c757d);
    --grid-header-text-color: #ffffff;
    --grid-border-color: #dee2e6;
    --grid-row-even-color: #f8f9fa;
    --grid-row-odd-color: #ffffff;
    --grid-font-size: 0.8rem;
    --grid-cell-padding: 0.1rem 0.2rem;
    --grid-filter-bg: #ffffff;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--grid-font-size);
}

.badge-secondary {
    background-color: var(--area-color, #6c757d);
}

.data-grid th, .data-grid td {
    border: 1px solid var(--grid-border-color);
}

.data-grid thead th {
    background-color: var(--grid-header-color);
    color: var(--grid-header-text-color);
    font-weight: 600;
    padding: var(--grid-cell-padding);
}

.data-grid tbody td {
    padding: var(--grid-cell-padding);
    vertical-align: middle;
}

.data-grid tbody tr:nth-child(odd) {
    background-color: var(--grid-row-odd-color);
}

.data-grid tbody tr:nth-child(even) {
    background-color: var(--grid-row-even-color);
}

.data-grid th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-grid .sort-icon {
    margin-left: 5px;
    font-size: 10px;
}

.data-grid .filter-row th {
    padding: 4px;
}

.data-grid .column-filter {
    width: 100%;
    padding: 3px 5px;
    font-size: 11px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    background-color: var(--grid-filter-bg);
}

/* Colonne action */
.data-grid tbody td.grid-action {
    text-align: center;
    vertical-align: middle;
}

.data-grid tbody td.grid-action i {
    font-size: 1.25rem;
}