#billTable, #saleTable {
  width: 100%;
  margin-top: 16px;
  table-layout: fixed;
  border-collapse: collapse;
}

#billTable thead, #saleTable thead {
  display: table-header-group;
  background: var(--light-bg);
  font-weight: 600;
  color: var(--text-primary);
}

#billTable thead tr, #saleTable thead tr {
  display: table-row;
}

#billTable thead th, #saleTable thead th {
  display: table-cell;
  padding: 12px 8px;
  text-align: center;
  border-bottom: 2px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#billTable tbody tr, #saleTable tbody tr {
  display: table-row;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition);
}

#billTable tbody tr:hover, #saleTable tbody tr:hover {
  background: var(--light-bg);
}

#billTable td, #saleTable td {
  display: table-cell;
  padding: 14px 8px;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 0;
  color: var(--text-primary);
}

#billTable td:before, #saleTable td:before {
  display: none;
}

#billTable td:first-child, #saleTable td:first-child {
  text-align: left;
  font-weight: 600;
}

#billTable td:last-child, #saleTable td:last-child {
  text-align: center;
}

.remove-bill-item, .remove-sale-item {
  background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-width: 40px;
  transition: all var(--transition);
  box-shadow: var(--shadow-xs);
}

.remove-bill-item:hover, .remove-sale-item:hover {
  box-shadow: var(--shadow-sm);
}

.remove-bill-item:active, .remove-sale-item:active {
  transform: scale(0.95);
}