.cos-data-wrap {
    min-width: 0;
    max-width: 100%;
}

.cos-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--cos-color-border);
    border-radius: var(--cos-radius-md);
    background: var(--cos-color-surface);
}

.cos-table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
}

.cos-table th,
.cos-table td {
    padding: var(--cos-space-3);
    border-bottom: 1px solid var(--cos-color-border);
}

.cos-table-compact th,
.cos-table-compact td {
    padding: var(--cos-space-2) var(--cos-space-3);
}

.cos-table-hover tbody tr:hover {
    background: var(--cos-color-surface-muted);
}

.cos-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.cos-table-actions {
    white-space: nowrap;
    width: 1%;
}

.cos-table th {
    background: var(--cos-color-surface-muted);
    color: var(--cos-color-text);
    font-weight: 700;
}

.cos-card {
    border: 1px solid var(--cos-color-border);
    border-radius: var(--cos-radius-md);
    background: var(--cos-color-surface);
    padding: var(--cos-space-4);
}

.cos-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: var(--cos-font-size-xs);
    font-weight: 700;
    background: var(--cos-color-surface-muted);
    color: var(--cos-color-text);
}

.cos-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cos-space-2);
    align-items: center;
    min-width: 0;
}

.cos-empty,
.cos-loading {
    padding: var(--cos-space-6);
    border: 1px dashed var(--cos-color-border);
    border-radius: var(--cos-radius-md);
    text-align: center;
    color: var(--cos-color-text-muted);
    background: var(--cos-color-surface);
}

.cos-mobile-list {
    display: none;
}

.cos-mobile-list .cos-card {
    margin-bottom: var(--cos-space-3);
}

@media (max-width: 767.98px) {
    .cos-table {
        min-width: 560px;
    }

    .cos-mobile-list {
        display: grid;
        gap: var(--cos-space-3);
    }

    .cos-data-wrap.is-mobile-list .cos-table-wrap {
        display: none;
    }

    .cos-data-wrap.is-mobile-list .cos-mobile-list {
        display: grid;
    }

    .cos-data-wrap:not(.is-mobile-list) .cos-mobile-list {
        display: none;
    }
}