.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    font-size: 14px;
}

.dashboard-table th,
.dashboard-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
    white-space: nowrap;
}

.dashboard-table thead {
    background: var(--gray-100);
}

.dashboard-table tbody tr:nth-child(even) {
    background: var(--gray-50);
}

.dashboard-table tbody tr:hover {
    background: var(--gray-100);
}

.dashboard-table .actions {
    text-align: right;
}

.actions .icon-btn:not(:first-child) { 
    margin-left: .5em;
}

/* Badges */

.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 12px;
    border-radius: 999px;
    background: var(--gray-200);
}

.badge.success {
    background: #e6f4ea;
    color: #137333;
}

/* Mobile */ 

@media (max-width: 768px) {
    .dashboard-table thead {
        display: none;
    }

    .dashboard-table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--gray-200);
        border-radius: 6px;
    }

    .dashboard-table td {
        display: flex;
        justify-content: start; /* space-between; */
        padding: 0.6rem;
    }

    .dashboard-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--gray-600);
    }

    .dashboard-table .actions {
        justify-content: flex-end;
        gap: 0.5rem;
    }
}